Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Initial scroll sometimes needed for images to load #48

Closed
wants to merge 1 commit into from

4 participants

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

@Izzmo Izzmo 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.
f1a5756
@tuupola
Owner

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
Owner

Fixed in 1.8.1. Release coming soon (tm).

@tuupola tuupola closed this
@tuupola tuupola referenced this pull request from a commit
@tuupola 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.
1ec3cfe
@andrewminton

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

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

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

@andrewminton
@tuupola
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

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

@tuupola
Owner

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Aug 15, 2012
  1. @Izzmo

    Minor bug fix for loading

    Izzmo authored
    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.
This page is out of date. Refresh to see the latest.
Showing with 10 additions and 4 deletions.
  1. +4 −0 README.textile
  2. +4 −2 jquery.lazyload.js
  3. +2 −2 jquery.lazyload.min.js
View
4 README.textile
@@ -1,5 +1,9 @@
h3. Changelog
+h4. 1.8.1
+
+* Minor bug fix to account for websites with large JavaScript parsing and many DOM elements which causes LazyLoad not to load images above the fold.
+
h4. 1.8.0
* Allow different elements to use different containers ("Rob Walch":https://github.com/robwalch)
View
6 jquery.lazyload.js
@@ -9,7 +9,7 @@
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
- * Version: 1.8.0
+ * Version: 1.8.1
*
*/
(function($, window) {
@@ -131,7 +131,9 @@
});
/* Force initial check if images should appear. */
- update();
+ $(document).ready(function() {
+ update();
+ });
return this;
};
View
4 jquery.lazyload.min.js
@@ -9,7 +9,7 @@
* Project home:
* http://www.appelsiini.net/projects/lazyload
*
- * Version: 1.8.0
+ * Version: 1.8.1
*
*/
-(function(a,b){var c=a(b);a.fn.lazyload=function(d){function h(){var b=0;e.each(function(){var c=a(this);if(g.skip_invisible&&!c.is(":visible"))return;if(!a.abovethetop(this,g)&&!a.leftofbegin(this,g))if(!a.belowthefold(this,g)&&!a.rightoffold(this,g))c.trigger("appear");else if(++b>g.failure_limit)return!1})}var e=this,f,g={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:!0,appear:null,load:null};return d&&(undefined!==d.failurelimit&&(d.failure_limit=d.failurelimit,delete d.failurelimit),undefined!==d.effectspeed&&(d.effect_speed=d.effectspeed,delete d.effectspeed),a.extend(g,d)),f=g.container===undefined||g.container===b?c:a(g.container),0===g.event.indexOf("scroll")&&f.bind(g.event,function(a){return h()}),this.each(function(){var b=this,c=a(b);b.loaded=!1,c.one("appear",function(){if(!this.loaded){if(g.appear){var d=e.length;g.appear.call(b,d,g)}a("<img />").bind("load",function(){c.hide().attr("src",c.data(g.data_attribute))[g.effect](g.effect_speed),b.loaded=!0;var d=a.grep(e,function(a){return!a.loaded});e=a(d);if(g.load){var f=e.length;g.load.call(b,f,g)}}).attr("src",c.data(g.data_attribute))}}),0!==g.event.indexOf("scroll")&&c.bind(g.event,function(a){b.loaded||c.trigger("appear")})}),c.bind("resize",function(a){h()}),h(),this},a.belowthefold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.height()+c.scrollTop():f=a(e.container).offset().top+a(e.container).height(),f<=a(d).offset().top-e.threshold},a.rightoffold=function(d,e){var f;return e.container===undefined||e.container===b?f=c.width()+c.scrollLeft():f=a(e.container).offset().left+a(e.container).width(),f<=a(d).offset().left-e.threshold},a.abovethetop=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollTop():f=a(e.container).offset().top,f>=a(d).offset().top+e.threshold+a(d).height()},a.leftofbegin=function(d,e){var f;return e.container===undefined||e.container===b?f=c.scrollLeft():f=a(e.container).offset().left,f>=a(d).offset().left+e.threshold+a(d).width()},a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)},a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return!a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})})(jQuery,window)
+(function(a,b){var c=a(b);a.fn.lazyload=function(d){function h(){var b=0;e.each(function(){var c=a(this);if(g.skip_invisible&&!c.is(":visible")){return}if(a.abovethetop(this,g)||a.leftofbegin(this,g)){}else if(!a.belowthefold(this,g)&&!a.rightoffold(this,g)){c.trigger("appear")}else{if(++b>g.failure_limit){return false}}})}var e=this;var f;var g={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:b,data_attribute:"original",skip_invisible:true,appear:null,load:null};if(d){if(undefined!==d.failurelimit){d.failure_limit=d.failurelimit;delete d.failurelimit}if(undefined!==d.effectspeed){d.effect_speed=d.effectspeed;delete d.effectspeed}a.extend(g,d)}f=g.container===undefined||g.container===b?c:a(g.container);if(0===g.event.indexOf("scroll")){f.bind(g.event,function(a){return h()})}this.each(function(){var b=this;var c=a(b);b.loaded=false;c.one("appear",function(){if(!this.loaded){if(g.appear){var d=e.length;g.appear.call(b,d,g)}a("<img />").bind("load",function(){c.hide().attr("src",c.data(g.data_attribute))[g.effect](g.effect_speed);b.loaded=true;var d=a.grep(e,function(a){return!a.loaded});e=a(d);if(g.load){var f=e.length;g.load.call(b,f,g)}}).attr("src",c.data(g.data_attribute))}});if(0!==g.event.indexOf("scroll")){c.bind(g.event,function(a){if(!b.loaded){c.trigger("appear")}})}});c.bind("resize",function(a){h()});a(document).ready(function(){h()});return this};a.belowthefold=function(d,e){var f;if(e.container===undefined||e.container===b){f=c.height()+c.scrollTop()}else{f=a(e.container).offset().top+a(e.container).height()}return f<=a(d).offset().top-e.threshold};a.rightoffold=function(d,e){var f;if(e.container===undefined||e.container===b){f=c.width()+c.scrollLeft()}else{f=a(e.container).offset().left+a(e.container).width()}return f<=a(d).offset().left-e.threshold};a.abovethetop=function(d,e){var f;if(e.container===undefined||e.container===b){f=c.scrollTop()}else{f=a(e.container).offset().top}return f>=a(d).offset().top+e.threshold+a(d).height()};a.leftofbegin=function(d,e){var f;if(e.container===undefined||e.container===b){f=c.scrollLeft()}else{f=a(e.container).offset().left}return f>=a(d).offset().left+e.threshold+a(d).width()};a.inviewport=function(b,c){return!a.rightofscreen(b,c)&&!a.leftofscreen(b,c)&&!a.belowthefold(b,c)&&!a.abovethetop(b,c)};a.extend(a.expr[":"],{"below-the-fold":function(b){return a.belowthefold(b,{threshold:0})},"above-the-top":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-screen":function(b){return a.rightoffold(b,{threshold:0})},"left-of-screen":function(b){return!a.rightoffold(b,{threshold:0})},"in-viewport":function(b){return!a.inviewport(b,{threshold:0})},"above-the-fold":function(b){return!a.belowthefold(b,{threshold:0})},"right-of-fold":function(b){return a.rightoffold(b,{threshold:0})},"left-of-fold":function(b){return!a.rightoffold(b,{threshold:0})}})})(jQuery,window)
Something went wrong with that request. Please try again.