ProLoser/AnythingSlider — Issue #269: Lazyloading continued
Author: peva
Created: 2012-02-06 22:37:16+00:00
State: open

Hi again!

I'm still having trouble with getting my sliders to lazyload correctly, and therefore was having another look at your lazy loading demo: http://jsfiddle.net/Mottie/Cm479/3511/

I wanted to see what requests were being made, while the slider was getting initialized, and therefore had a closer look at the rendered page, which could be found here:
http://fiddle.jshell.net/Mottie/Cm479/3511/show/

I was using Firebug and its Net panel for debugging, and could see, that when the slider loads, it's actually requesting for 7 images (6 slide images + arrow sprite). I might be wrong, but to me it looks like all the content is being loaded at once despite the lazy loading, and I think that it's happening because the image url's are being used in the src attribute, while the page is being loaded, after which they're getting moved into the data-src attribute. So I'm guessing, that the browser has already requested for the images before the image reference is moved over to data-src.

I'm new to the concept of lazy loading, and I've only seen it implemented in Estro slider (http://pixelentity.com/previews/components/estro/) in which the images are using both src and data-src attributes. On page load, the src attribute refers to a blank png, while the data-src contains the actual image url. When the slide is loaded, the value from data-src gets copied over to the src attribute. In Estro's demo the slide images are getting fetched one at a time, so I'm thinking that their way to implement lazy loading is probably the way to go.

As I said, I'm a novice to this, and I might be wrong, but in case I'm not, I just wanted to mention this to you, because if the lazy loading demo isn't actually lazy loading at all, you would probably want to fix it.