Initial scroll sometimes needed for images to load

[Izzmo]

I did a simple 2'ish line fix to wrap the initial update() call around a document.ready from jQuery to account for long load times.

[tuupola]

Did you have problems with sometimes images not loading before user scrolled couple of pixels?

[Izzmo]

Exactly; when the page was being loaded and the initial update() call was placed, lazyload either a) thought the images were hidden or b) under the page fold. But it when the page was done loading, the images would still not appear until the user scrolled. Doing this seemed to fix all those problems.

[tuupola]

Fixed in 1.8.1. Release coming soon (tm).

[andrewminton]

Does this fix also cater for a situation where lazyload isn't kicking in until I resize the browser?

[tuupola]

@andrewminton You most likely do not have width and height set in your images. What is the url of the page you have problems with?

[Izzmo]

Race condition could be happening too @tuupola, do you have an example piece of code/live site we could refer to @andrewminton

[andrewminton]

@tuupola As in attributes for width and height? not CSS declaration right?

[tuupola]

@andrewminton AFAIK CSS should be enough too. Main thing is that browsers should know where in the layout images are located before images are loaded. No width and height or css declaration means size of 0x0 so images will be positioned according to size 0x0 too. Additionally jQuery reports size 0x0 images as not visible for webkit browsers.

Anyway hard to say without seeing the page which you have problems with.

[andrewminton]

Thanks Mike.. How come a rotation of a mobile device or window resize
forces and triggers the load of the items? Can't link to page, it's a
private dev box at work.. wish I could link to it somehow... maybe I'll
jsfiddle the page and assets or something..

[tuupola]

@andrewminton Window resize is intentional. Check the line 130. Maybe orientation change also triggers resize? Not sure though.

https://github.com/tuupola/jquery_lazyload/blob/master/jquery.lazyload.js#L130

[wuservices]

@tuupola You mentioned that the main thing is that the browser should know how to layout the images. Does this mean that images with no dimensions specified are supposed to be handled correctly as long as the layout predefines their placement? For example, on this page, the images don't have dimensions set but they are all in containers with preset dimensions: http://www.paperculture.com/eco/holiday-cards-invitations-christmas-cards-holiday-photo-cards-c-99.html.

There's currently no problem that I'm aware of on this page with an older version on lazyload, but I wanted to make sure my observations that things are working don't conflict with any assumptions you've made.

[andrewminton]

I'm trying to think of a way to trigger the event on page load using the
"event:'load'" method but no joy.. maybe it is related to the image size..
I was trying to make the images dynamic by wrapping the in a container and
declaring them 100% width.. maybe the width being % could be an issue.

[tuupola]

@wuservices If layout predefines placement there is one problem left. With Webkit browsers jQuery reports images without dimensions as not visible upon document.ready event. This means if in settings you have skip_invisible : true in Webkit images wont show before initial scroll.

There was a fix for this in 1.8.3 (3be513d). However this caused more problems than it solves (broke pages which load content with AJA(X|H) so I am reverting it. Only fully working way I know is to include image dimensions in either img tag attributes or in css.

You could of course skip_invisible : false too.

[tuupola]

@andrewminton You mean something like

$(window).load(function() {
    $(window).trigger("scroll");
});

?

[wuservices]

@tuupola Thanks for that explanation! Very helpful. I noticed that the page I referenced does work in Chrome and Safari mobile, but... well I was actually about to type that it broke in the latest Safari on my Mac but I can't seem to make it break again even after clearing cache and trying other machines. I think you're right though as I've seen an issue on iPhone before although I can't see to reproduce that now either.

Do you know how I might force this issue to rear it's head or do you have issues on http://www.paperculture.com/eco/holiday-cards-invitations-christmas-cards-holiday-photo-cards-c-99.html? The first 2 rows of images are not lazy loaded so you need a big screen (or a long skinny one like an iPhone) to make the 3rd row visible without scrolling anyways though. In any case it's good to understand the behavior.

I can see how 3be513d could solve the jQuery issue, but I would agree that it could cause more problems that it solves including maybe slowing things down since load takes a while on some pages.

Not sure that it's worth it or a good idea but you could potentially give each image a 1x1 size and then remove the dimensions when the image loads.