A bit of a beginner here and I’m completely stuck on how to solve this problem. So I’m trying to use an image Lazy Loading package that needs me to initialize the lazy loading by calling $(“img”).unveil();, which sounds easy at first but I started to realize that it will be called before actually rendering the divs containing the images. I need this initialization function to be called after everything has been rendered.
Here’s the problem breakdown:
- Lets say I have a template named postlist and in this template is just a blaze #each of {{> posts}}.
- I also have a template named posts which contains an image that I want to lazyload.
- I want to call $(“img”).unveil() on the postlist template onRendered because if I call it on the post template, it will be called more than once (assuming i have more than 1 post), which induces performance issues.
- If I call it on postlist, it wont work because the $(“img”).unveil() is called before the images on the post template are even rendered.
Here are some things I have tried to solve it:
- I called $(“img”).unveil() on the post template onRendered, but it still won’t register because on the post.html, I have this:
{{#if isReady}}
((content for the post))
{{else}}
{{> loading template}}
{{/if}}
The problem with calling $(“img”).unveil() on the post onRendered is that it will be called when isReady is false in the beginning, thus there are no images rendered, only the loading template. If I add a setTimeout to the unveil, it works but leads to stuttering because having multiple $(“img”).unveil() causes performance issues. setTimeout is also something I would like to avoid using because people with slow internet speeds might actually still be on the loading template even after setTimeout is finished.
-
setTImeout on postlist onRendered, which works but would like to avoid because of what I mentioned above.
-
setInterval on postlist onRendered, which induces multiple calls to $(“img”).unveil(), which then has performance issues.
Is there any way to call this initialization function after all the image divs are rendered? Am I missing a key feature that helps me solve this issue? I also had this problem with Bootstrap’s tooltip which needs me to initialize them using $(’[data-toggle=“tooltip”]’).tooltip() after the tooltips were rendered. I solved this issue by setting a setInterval on it but setInterval on $(“img”).unveil() induces lag. Any help or suggestions would be greatly appreciated! Thanks in advance.