// 天涯版
(function(jQuery) {
jQuery.fn.lazyload = function(options) {
var settings = {
threshold : 0,
failurelimit : 0,
event : "scroll",
effect : "show",
container : window
};
if(options) {
jQuery.extend(settings, options);
}
/* Fire one scroll event per scroll. Not one scroll event per image. */
var elements = this;
if ("scroll" == settings.event) {
jQuery(settings.container).bind("scroll", function(event) {
var counter = 0;
elements.each(function() {
if (jQuery.abovethetop(this, settings)) {
/* Nothing. */
} else if (!jQuery.belowthefold(this, settings)) {
jQuery(this).trigger("appear");
} else {
if (counter++ > settings.failurelimit) {
return false;
}
}
});
/* Remove image from array so it is not looped next time. */
var temp = jQuery.grep(elements, function(element) {
return !element.loaded;
});
elements = jQuery(temp);
});
}
this.each(function() {
var self = this;
/* Save original only if it is not defined in HTML. */
if (undefined != jQuery(self).attr("original")){
self.loaded = false;
/* When appear is triggered load original image. */
jQuery(self).one("appear", function() {
if (!this.loaded) {
jQuery("<img />")
.bind("load", function() {
jQuery(self)
.hide()
.removeAttr("height")
.attr("src", jQuery(self).attr("original"))
[settings.effect](settings.effectspeed);
self.loaded = true;
})
.attr("src", jQuery(self).attr("original"));
};
});
}
});
/* Force initial check if images should appear. */
jQuery(settings.container).trigger(settings.event);
return this;
};
/* Convenience methods in jQuery namespace. */
/* Use as jQuery.belowthefold(element, {threshold : 100, container : window}) */
function checkshow(){
}
jQuery.belowthefold = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = jQuery(window).height()*2 + jQuery(window).scrollTop();
} else {
var fold = jQuery(settings.container).offset().top + jQuery(settings.container).height()*2;
}
return fold <= jQuery(element).offset().top - settings.threshold;
};
jQuery.abovethetop = function(element, settings) {
if (settings.container === undefined || settings.container === window) {
var fold = jQuery(window).scrollTop();
} else {
var fold = jQuery(settings.container).offset().top;
}
return fold >= jQuery(element).offset().top + settings.threshold + jQuery(element).height();
};
/* Custom selectors for your convenience. */
/* Use as jQuery("img:below-the-fold").something() */
jQuery.extend(jQuery.expr[':'], {
"below-the-fold" : "jQuery.belowthefold(a, {threshold : 0, container: window})",
"above-the-fold" : "!jQuery.belowthefold(a, {threshold : 0, container: window})"
});
})(jQuery);
jQuery("#pContentDiv .post img[original]").lazyload({
effect:"fadeIn"
});
另外一版本的参考
Jquery.LazyLoad.js插件修正版下载,实现图片延迟加载特效
分享到:
相关推荐
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是...
延迟加载图片jquery.lazyload.js 延迟加载图片jquery.lazyload.js
修改jquery.lazyload.js实现页面延迟载入
图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
jquery图片延迟加载插件,支持响应事件加载
怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句...
主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下
没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是从...
jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等
<script src="jquery.lazyload.js" type="text/javascript"></script> 2.在你的页面中加入如下的javascript: $("img").lazyload(); 这将会使所有的图片都延迟加载。 当然插件还有几个配置项可供设置。 1....
jQuery图片预加载代码是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效。
任何内容的延迟加载变得容易 任何内容 包括src/jquery.lazy_content.js $ ( ".elements" ) . lazyContent ( { threshold : 0 , // The amount of pixels to load earlier load : function ( element ) { // ...
该资源包含lazyload.js、jquery2.1、还有个小Demo可供参考
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的.
jQuery图片延迟加载插件Lazy Load,在网页上出现大量图片的时候,一下加载全部图片需要加载比较长的时间,懒加载的目的就是减少加载时间,按需加载从而达到提升用户体验的目的。