// 天涯版
(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插件修正版下载,实现图片延迟加载特效
分享到:
相关推荐
- **设置图片属性**:将图片的`src`属性替换为`data-src`,以告诉LazyLoad.js这些图片需要延迟加载。 ```html <img data-src="images/lazy-image.jpg" alt="懒加载图片"> ``` - **初始化插件**:在文档加载完成后...
Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...
你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.
《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...
**jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...
没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是...
图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js
### 延迟加载图片技术详解:利用jquery.lazyload.js实现高效页面加载 #### 技术背景 在互联网时代,网站或应用中的图片资源占据了大量的数据传输量,尤其是在移动网络环境下,图片的加载速度直接影响了用户体验及...
修改jquery.lazyload.js实现页面延迟载入
1. **基本使用**:引入jQuery库和jQuery.lazyload.js文件,然后对需要懒加载的图片添加特定的CSS类(通常为"data-src"),这样插件就能识别这些图片并进行处理。 2. **自定义占位符**:除了默认的1x1像素透明图,你...
在JavaScript领域,jQuery库提供了一个优秀的懒加载插件——jQuery LazyLoad.js,它能够有效地提高页面性能,降低服务器压力。 **一、jQuery LazyLoad.js 插件原理** jQuery LazyLoad.js 的核心思想是只加载视口内...
从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。
`jQuery.lazyload` 是一个优秀的jQuery插件,它允许我们在页面滚动时按需加载图片,从而显著提高页面加载速度。 ### 1. 懒加载概念 懒加载是一种延迟加载策略,主要针对非首屏内容,尤其是大尺寸图片。当用户滚动...
- **jquery.lazyload.js**:这是懒加载插件的核心文件,包含了实现图片延迟加载功能的JavaScript代码,需要在网页中引入并进行适当配置。 - **图片延迟加载(懒加载)jQuery插件**:可能是一个包含使用该插件的HTML、...
标题中的“【ZT】图片延迟加载 jquery.lazyload插件”指的是使用jQuery库的一个扩展插件——jQuery Lazyload,该插件主要用于实现图片的延迟加载技术。延迟加载是一种优化网页性能的方法,它允许图片在用户滚动到...
1. **引入 jQuery 和 LazyLoad**:首先确保页面中已经引入了 jQuery 库,然后引入 LazyLoad 的 JavaScript 文件,如 `jquery.lazyload.js`。 2. **设置 HTML 结构**:给需要延时加载的图片添加特定的类名(如 `lazy...
然后引入 jQuery.lazyload 插件,如 `jquery.lazyload.min.js` 文件,提供延迟加载的功能。 2. **HTML 结构**:在 HTML 中,为需要延迟加载的图片添加特定的类名(通常是 `.lazyload`),同时设置 `data-src` 属性...
为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许我们实现图片的延迟加载(也称为懒加载),即图片只在用户滚动到可视区域时才开始加载。这种方式可以显著提升网页的加载速度,特别是对于拥有...
为了解决这一问题,我们可以使用`jQuery LazyLoad`插件实现图片的延迟加载,即“懒加载”。本文将详细介绍如何利用jQuery LazyLoad来实现图片的懒加载功能,并通过实例进行演示。 ### 1. jQuery LazyLoad 插件简介 ...