Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP

Loading…

Fix always scroll to top issue on IE 7 #18

Closed
wants to merge 3 commits into from

3 participants

@chrisyip

When the container is "window" and event is "scroll", will cause window to scroll back to top on IE 7.

The reason is

// settings.container = window
// settings.event = "scroll"
$(settings.container).trigger(settings.event);

works as the below code on IE 7:

window.scrollTo(0, 0);`

Also, I cached window object to improve performance.

@tuupola
Owner

I cannot merge this patch cleanly anymore since there have been quite many changes. But I am doing it manually. Great patch! Short scoping and caching the window object almost doubles the selector speed.

http://jsperf.com/lazyload-1-6-0
http://jsperf.com/lazyload-1-7-0

@tuupola tuupola was assigned
@tuupola
Owner

Do you still experience the IE7 bug also with latest jQuery? To me it looks like it was fixed in 1.7.

http://bugs.jquery.com/ticket/6170

@chrisyip

Maybe latest jQuery fixed this issue, but for some frameworks, e.g. Drupal 6, you can't simply update jQuery to latest one, that's why I fix this issue, and this issue is easy to fix :-)

About the performance of copying window, on my Chrome 16.0.912.75 on Mac OS X 10.7.2, it's faster than don't copy.
In fact, I was just wanna pull request for the IE 7 issue, not the performance or something else :/
Coz I'm customizing it to fit our Drupal project.
Just Forget about it.

@tuupola
Owner

That is interesting. I just tested Chrome 16.0.912.75 on Mac OS X 10.7.2 and I get around 4600 ops / second when copying and 7200 ops / second when caching.

Anyway, what version of jQuery Drupal 6 is using?

@chrisyip

Drupal 6 is using 1.2.6 for core library (WTF?!), with a third-part module, can be upgraded to 1.3.2.
In the past, I tried to upgrade to 1.5.2 (or lower), and lots of core features were broken.
Although I can load latest jQuery with $.noConflict() and initialize lazyload with it.

@ssorallen

The issue affects even jQuery 1.7 as far as I can tell. Try scrolling to the bottom of http://www.ea.com/ and executing jQuery(window).trigger('scroll'), which is what happens in this plugin's resize listener by default. That call scrolls the page to the top.

@ssorallen

Example: scroll to the bottom of your project page, http://www.appelsiini.net/projects/lazyload, and then resize the window. It scrolls to the top.

Edit: I'm on OS X, Chrome 17.0.963.56

@tuupola
Owner

Actually project page has 1.6. Demo pages have 1.7.

http://www.appelsiini.net/projects/lazyload/enabled_fadein.html

But since many people are still using 1.6 and older I might consider including Chris' workaround for Chrome.

@ssorallen

I noticed the 1.6/1.7 difference right after I wrote my comments. The workaround doesn't seem ideal, calling $window.scrollTo with the current coordinates.

@ssorallen ssorallen referenced this pull request from a commit in ssorallen/jquery_lazyload
Ross Allen Move image checking to its own function and call that rather than tri…
…gger events on elements not owned by the plugin; Fixes #18 since window.onscroll is never called by the plugin anymore
113d16e
@tuupola tuupola closed this pull request from a commit
Ross Allen Move image checking to its own function and call that rather than tri…
…gger events on elements not owned by the plugin; Fixes #18 since window.onscroll is never called by the plugin anymore
9c4cd8b
@tuupola tuupola closed this in 9c4cd8b
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jan 17, 2012
  1. @chrisyip
  2. @chrisyip
Commits on Jan 18, 2012
  1. @chrisyip

    Fix IE 7 scroll to top issue when window be resized. Change custom

    chrisyip authored
    attribute name to "data-attr".
This page is out of date. Refresh to see the latest.
View
0  jquery.lazyload.min.js → jquery.lazyload.1.6.min.js
File renamed without changes
View
50 jquery.lazyload.js → jquery.lazyload.1.7.0.js
@@ -12,7 +12,8 @@
* Version: 1.7.0-dev
*
*/
-(function($) {
+(function($, win) {
+ var $win = $(win);
$.fn.lazyload = function(options) {
var settings = {
@@ -20,8 +21,9 @@
failure_limit : 0,
event : "scroll",
effect : "show",
- container : window,
- skip_invisible : true
+ container : win,
+ skip_invisible : true,
+ data_attr : "origin"
};
if(options) {
@@ -30,7 +32,7 @@
options.failure_limit = options.failurelimit;
delete options.failurelimit;
}
-
+
$.extend(settings, options);
}
@@ -74,11 +76,11 @@
.bind("load", function() {
$(self)
.hide()
- .attr("src", $(self).data("original"))
+ .attr("src", $(self).data(settings.data_attr) || $(self).attr(settings.data_attr))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
- .attr("src", $(self).data("original"));
+ .attr("src", $(self).data(settings.data_attr) || $(self).attr(settings.data_attr));
};
});
@@ -94,12 +96,16 @@
});
/* Check if something appears when window is resized. */
- $(window).bind("resize", function(event) {
- $(settings.container).trigger(settings.event);
+ $win.bind("resize", function(event) {
+ if(0 === settings.event.indexOf('scroll')){
+ win.scrollTo($win.scrollLeft(), $win.scrollTop());
+ }else{
+ $(settings.container).trigger(settings.event);
+ }
});
/* Force initial check if images should appear. */
- $(settings.container).trigger(settings.event);
+ win.scrollTo($win.scrollLeft(), $win.scrollTop());
return this;
@@ -109,8 +115,8 @@
/* Use as $.belowthefold(element, {threshold : 100, container : window}) */
$.belowthefold = function(element, settings) {
- if (settings.container === undefined || settings.container === window) {
- var fold = $(window).height() + $(window).scrollTop();
+ if (settings.container === undefined || settings.container === win) {
+ var fold = $win.height() + $win.scrollTop();
} else {
var fold = $(settings.container).offset().top + $(settings.container).height();
}
@@ -118,8 +124,8 @@
};
$.rightoffold = function(element, settings) {
- if (settings.container === undefined || settings.container === window) {
- var fold = $(window).width() + $(window).scrollLeft();
+ if (settings.container === undefined || settings.container === win) {
+ var fold = $win.width() + $win.scrollLeft();
} else {
var fold = $(settings.container).offset().left + $(settings.container).width();
}
@@ -127,8 +133,8 @@
};
$.abovethetop = function(element, settings) {
- if (settings.container === undefined || settings.container === window) {
- var fold = $(window).scrollTop();
+ if (settings.container === undefined || settings.container === win) {
+ var fold = $win.scrollTop();
} else {
var fold = $(settings.container).offset().top;
}
@@ -136,8 +142,8 @@
};
$.leftofbegin = function(element, settings) {
- if (settings.container === undefined || settings.container === window) {
- var fold = $(window).scrollLeft();
+ if (settings.container === undefined || settings.container === win) {
+ var fold = $win.scrollLeft();
} else {
var fold = $(settings.container).offset().left;
}
@@ -147,10 +153,10 @@
/* Use as $("img:below-the-fold").something() */
$.extend($.expr[':'], {
- "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0, container: window}) },
- "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0, container: window}) },
- "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0, container: window}) },
- "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0, container: window}) }
+ "below-the-fold" : function(a) { return $.belowthefold(a, {threshold : 0, container: win}) },
+ "above-the-fold" : function(a) { return !$.belowthefold(a, {threshold : 0, container: win}) },
+ "right-of-fold" : function(a) { return $.rightoffold(a, {threshold : 0, container: win}) },
+ "left-of-fold" : function(a) { return !$.rightoffold(a, {threshold : 0, container: win}) }
});
-})(jQuery);
+})(jQuery, window);
View
19 jquery.lazyload.1.7.0.min.js
@@ -0,0 +1,19 @@
+/*
+ * Lazy Load - jQuery plugin for lazy loading images
+ *
+ * Copyright (c) 2007-2011 Mika Tuupola
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Project home:
+ * http://www.appelsiini.net/projects/lazyload
+ *
+ * Version: 1.7.0-dev
+ *
+ */
+(function(a,d){var e=a(d);a.fn.lazyload=function(c){var b={threshold:0,failure_limit:0,event:"scroll",effect:"show",container:d,skip_invisible:!0,data_attr:"origin"};if(c){if(null!==c.failurelimit)c.failure_limit=c.failurelimit,delete c.failurelimit;a.extend(b,c)}var f=this;0==b.event.indexOf("scroll")&&a(b.container).bind(b.event,function(){var c=0;f.each(function(){if((!b.skip_invisible||a(this).is(":visible"))&&!a.abovethetop(this,b)&&!a.leftofbegin(this,b))if(!a.belowthefold(this,b)&&!a.rightoffold(this,
+b))a(this).trigger("appear");else if(++c>b.failure_limit)return!1});var d=a.grep(f,function(a){return!a.loaded});f=a(d)});this.each(function(){var c=this;c.loaded=!1;a(c).one("appear",function(){this.loaded||a("<img />").bind("load",function(){a(c).hide().attr("src",a(c).data(b.data_attr)||a(c).attr(b.data_attr))[b.effect](b.effectspeed);c.loaded=!0}).attr("src",a(c).data(b.data_attr)||a(c).attr(b.data_attr))});0!=b.event.indexOf("scroll")&&a(c).bind(b.event,function(){c.loaded||a(c).trigger("appear")})});
+e.bind("resize",function(){0===b.event.indexOf("scroll")?d.scrollTo(e.scrollLeft(),e.scrollTop()):a(b.container).trigger(b.event)});d.scrollTo(e.scrollLeft(),e.scrollTop());return this};a.belowthefold=function(c,b){return(void 0===b.container||b.container===d?e.height()+e.scrollTop():a(b.container).offset().top+a(b.container).height())<=a(c).offset().top-b.threshold};a.rightoffold=function(c,b){return(void 0===b.container||b.container===d?e.width()+e.scrollLeft():a(b.container).offset().left+a(b.container).width())<=
+a(c).offset().left-b.threshold};a.abovethetop=function(c,b){return(void 0===b.container||b.container===d?e.scrollTop():a(b.container).offset().top)>=a(c).offset().top+b.threshold+a(c).height()};a.leftofbegin=function(c,b){return(void 0===b.container||b.container===d?e.scrollLeft():a(b.container).offset().left)>=a(c).offset().left+b.threshold+a(c).width()};a.extend(a.expr[":"],{"below-the-fold":function(c){return a.belowthefold(c,{threshold:0,container:d})},"above-the-fold":function(c){return!a.belowthefold(c,
+{threshold:0,container:d})},"right-of-fold":function(c){return a.rightoffold(c,{threshold:0,container:d})},"left-of-fold":function(c){return!a.rightoffold(c,{threshold:0,container:d})}})})(jQuery,window);
View
2  jquery.scrollstop.js
@@ -68,4 +68,4 @@
}
};
-})();
+})();
Something went wrong with that request. Please try again.