Initial scroll sometimes needed for images to load #48

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
4 participants
@Izzmo

Izzmo commented Aug 15, 2012

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.

Minor bug fix for loading
When a website has a lot of JavaScript parsing and/or DOM elements upon
page load, LazyLoad will not always load the images until the user
scrolls, even with images above the fold in sight. This fixes that.
@tuupola

This comment has been minimized.

Show comment Hide comment
@tuupola

tuupola Aug 16, 2012

Owner

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

Owner

tuupola commented Aug 16, 2012

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

@Izzmo

This comment has been minimized.

Show comment Hide comment
@Izzmo

Izzmo Aug 16, 2012

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.

Izzmo commented Aug 16, 2012

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

This comment has been minimized.

Show comment Hide comment
@tuupola

tuupola Aug 17, 2012

Owner

Fixed in 1.8.1. Release coming soon (tm).

Owner

tuupola commented Aug 17, 2012

Fixed in 1.8.1. Release coming soon (tm).

@tuupola tuupola closed this Aug 17, 2012

tuupola added a commit that referenced this pull request Dec 12, 2012

Proper fix for #48.
In some cases initial scroll was needed to display images in viewport. Apparently Webkit browsers sometimes need some time insert images into DOM. Without delay initial call to $.is(":visible") inside $(document).ready() sometimes returns false.
@andrewminton

This comment has been minimized.

Show comment Hide comment
@andrewminton

andrewminton Feb 27, 2013

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

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

@tuupola

This comment has been minimized.

Show comment Hide comment
@tuupola

tuupola Feb 27, 2013

Owner

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

Owner

tuupola commented Feb 27, 2013

@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

This comment has been minimized.

Show comment Hide comment
@Izzmo

Izzmo Feb 27, 2013

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

Izzmo commented Feb 27, 2013

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

@andrewminton

This comment has been minimized.

Show comment Hide comment
@andrewminton

andrewminton Feb 27, 2013

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

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

@tuupola

This comment has been minimized.

Show comment Hide comment
@tuupola

tuupola Feb 27, 2013

Owner

@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.

Owner

tuupola commented Feb 27, 2013

@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

This comment has been minimized.

Show comment Hide comment
@andrewminton

andrewminton Feb 27, 2013

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..

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

This comment has been minimized.

Show comment Hide comment
@tuupola

tuupola Feb 27, 2013

Owner

@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

Owner

tuupola commented Feb 27, 2013

@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

This comment has been minimized.

Show comment Hide comment
@wuservices

wuservices Feb 27, 2013

@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.

@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

This comment has been minimized.

Show comment Hide comment
@andrewminton

andrewminton Feb 27, 2013

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.

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

This comment has been minimized.

Show comment Hide comment
@tuupola

tuupola Feb 27, 2013

Owner

@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.

Owner

tuupola commented Feb 27, 2013

@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

This comment has been minimized.

Show comment Hide comment
@tuupola

tuupola Feb 27, 2013

Owner

@andrewminton You mean something like

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

?

Owner

tuupola commented Feb 27, 2013

@andrewminton You mean something like

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

?

@wuservices

This comment has been minimized.

Show comment Hide comment
@wuservices

wuservices Mar 1, 2013

@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.

@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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment