vvo/lazyload

Lazyload inside a long div

gmetais opened this issue · 5 comments

gmetais commented

I want to lazyload in a scrollable div container that is quite long.
So i made a <script> at the end of the div to declare my own instance of lazyload attached to this container.

Problem: Chrome (and Safari) will sometime launch the "onload" event of my images before the div is closed.

Here is a fiddle : http://jsfiddle.net/GJ8Cb/2/
(on Chrome and Safari, but does not reproduce every time)

vvo commented

I did not find a smart way to handle the problem yet, so i removed the onload="myLzld(this)" on each image and i now call it specifically for each image after myLzld is declared.

That a way to go, we could provide such a method in the lazyload itself, will do this

igravious commented

I have this issue too. If I have a scrollable horizontal div container with 100 images only some are lazy loaded, the rest remain as the tiny gif :/

zlatanvasovic commented

Did you try to put <script> before <div> code? It works for me.

vvo commented

Like @zdroid said, easy fix:

    <div id="myDiv">
    <script>
        var myLzld = lazyload({
            container: document.getElementById('myDiv')
        });
    </script>    
        <div>
            <img onload="myLzld(this)" data-src="http://upload.wikimedia.org/wikipedia/commons/5/5a/Wikipedia-logo-v2-fr.png" src="data:image/gif;base64,R0lGODlhAQABAAAAACH5BAEKAAEALAAAAAABAAEAAAICTAEAOw==" /> blablabla

Works everywhere, can you confirm @gmetais?

vvo commented

@gmetais @igravious see examples/custom-container.html for the right way to do it.