Comments (4)
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.
from imager.js.
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.
from imager.js.
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.
from imager.js.
@RickHolmes he he excellent :-) you pulled the master
branch in your project isn't it?
from imager.js.
Related Issues (20)
- JS error: Cannot call method 'replaceChild' of null --- Upon Scroll only HOT 4
- Replaced image width attribute HOT 1
- Support for inline background images HOT 9
- Lazy loading does not load images when revealed by a resize HOT 1
- Update/push bower version HOT 4
- Check if image is visible HOT 3
- Allow smaller image to be downloaded even if a larger version is already available HOT 4
- [PROPOSAL] Optimise DOM reads/writes HOT 8
- Firefox 29 requests `undefined` URL in case of lazy loading HOT 7
- [Question] Extra offset for `isThisElementOnScreen` method? HOT 2
- Imager use with single-page application? HOT 4
- Lazyload doesn't load images located on the first screen HOT 2
- Measuring element width in a layout that uses flexbox layout HOT 4
- Interpolation of src-attribute HOT 8
- can you use this for background images? HOT 1
- Missing generated files for Lazy Load demo HOT 1
- Only replace {width} placeholder, without changing element HOT 3
- Aspect ratio of images while loading page
- Adding a fade effect to lazy loaded images
- What about WebP support?
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from imager.js.