Lazy load broken on Android

[RickHolmes]

Lazy loading seems to be broken both on real Android phones and on Android emulators, at least for the default Android browser.

It seems that the default browser (and apparently also most third-party browsers) do not fire the scroll event until after the scroll is finished. (Same with touchmove.) So somewhere along the line the Imager must get "confused" and doesn't write a src for the replaced image. This is unfortunate, since a phone is probably the best use case for lazy loading.

I have seen working lazy-load code that uses a function bound to the img onload event that writes the new src. I don't know whether this method was tried and discarded or not, but I'll see if I can make it work, at least for my use.

[thom4parisot]

Hey thanks for the feedback.

Hopefully with #75 we would be able to have Android unit testing and possibly follow this issue with a test.
I don't what is better:

• loading below the fold images on scroll
• loading below the fold images afterwards, while the radio is still hot

My concern is the initial data savings are inhibited by the possible radio wake up, resulting in a slow loading of the below the fold images.

This issue is also something common on Mobile Safari as far as I remember. The only way is to track page offset in the requestAnimationFrame loop.

[RickHolmes]

Your first alternative isn't a solution, since the scroll event does not fire until after you've finished scrolling. So there would be no "lazy loading". What would most likely happen is that all the rest of the images on the page would load all at once. The second alternative looks like it's basically the same as not having lazy loading turned on; the timing is just a bit different.

Since you already have a timer running, I was thinking of mimicking the scroll event (CustomEvent?) by initially getting the scrollTop position and then checking with each timer iteration to see if somebody scrolled down. Of course you'd want to somehow use only this when needed, and I don't know what the performance/memory implications would be.

It is possible, though, that the lazy loading may also have an entirely different problem on Android. For instance, using lazy loading on the site I'm building now, probably the most important page has a number of images in a four-wide responsive grid. The figures that hold the images will all initially appear as full-width 1px high elements with 1px borders. On tablets, only the images in the first couple of rows load, with anything below the fold just showing borders, even when scroll is complete. On larger (480px) phones, there is no grid and the design is a bit different, but the error is the same. On pages where there are no borders, nothing appears at all to show that you're missing something.

I'm testing on Android emulators running on VirtualBox, but I've been told that the issue also exists on "real" devices. (BTW, do you know of any way to connect a desktop browser's development tools to a browser on an emulator? Firebug Lite just doesn't make it.)

If you would like to see the error in action, let me know and I'll give you a url and turn on lazy loading.

[RickHolmes]

Ah, it seems that lazy load was broken on Android due to the way I had implemented the IE8 fix. ;-(

The latest version seems to work fine in everything.

[thom4parisot]

@RickHolmes he he excellent :-) you pulled the master branch in your project isn't it?