Lazy load broken on Android about imager.js

[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?