`
desert3
  • 浏览: 2159512 次
  • 性别: Icon_minigender_1
  • 来自: 合肥
社区版块
存档分类
最新评论

jquery.lazyload.js 图片延迟加载

 
阅读更多
// 天涯版
(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插件修正版下载,实现图片延迟加载特效
分享到:
评论

相关推荐

    jquery.lazyload.js 图片懒加载 --demo

    - **设置图片属性**:将图片的`src`属性替换为`data-src`,以告诉LazyLoad.js这些图片需要延迟加载。 ```html &lt;img data-src="images/lazy-image.jpg" alt="懒加载图片"&gt; ``` - **初始化插件**:在文档加载完成后...

    jQuery.lazyload.js

    Lazy Load 是一个用 JavaScript 编写的 jQuery 插件. 它可以延迟加载长页面中的图片. 在浏览器可视区域外的图片不会被载入, 直到用户将页面滚动到它们所在的位置. 这与图片预加载的处理方式正好是相反的. 在包含很多...

    图片延迟加载特效,jquery.lazyload.js

    你必须修改 HTML 代码. 在 src 属性中设置展位符图片, demo 页面使用 1x1 像素灰色 GIF 图片.... 这里可以定义特定的 class 以获得需要延迟加载的图片对象. 通过这种方法你可以简单地控制插件绑定.

    jquery.lazyload图片预加载效果 jquery预加载

    《jQuery LazyLoad 图片预加载技术详解》 在网页设计中,图片的加载速度往往直接影响着用户体验。当页面中包含大量图片时,如果一次性全部加载,可能会导致页面加载时间过长,用户需要等待,这无疑降低了网站的可用...

    jquery.lazyload 实现图片延迟加载

    **jQuery LazyLoad 插件详解:实现图片延迟加载** 在网页设计中,为了提升用户体验,减少页面初次加载的时间,一种常见的优化策略是采用图片延迟加载(Image Lazy Load)技术。`jQuery LazyLoad` 是一个非常实用的 ...

    Jquery.LazyLoad.js实现图片延迟加载插件

    没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。 解决思路大致是两点,一是...

    jquery.lazyload.min.js

    图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js图片延迟加载js

    延迟加载图片jquery.lazyload.js

    ### 延迟加载图片技术详解:利用jquery.lazyload.js实现高效页面加载 #### 技术背景 在互联网时代,网站或应用中的图片资源占据了大量的数据传输量,尤其是在移动网络环境下,图片的加载速度直接影响了用户体验及...

    jquery 延迟加载JS jquery.lazyload.js

    修改jquery.lazyload.js实现页面延迟载入

    jQuery.lazyload-1.7.2

    1. **基本使用**:引入jQuery库和jQuery.lazyload.js文件,然后对需要懒加载的图片添加特定的CSS类(通常为"data-src"),这样插件就能识别这些图片并进行处理。 2. **自定义占位符**:除了默认的1x1像素透明图,你...

    懒加载jquery.lazyload.js

    在JavaScript领域,jQuery库提供了一个优秀的懒加载插件——jQuery LazyLoad.js,它能够有效地提高页面性能,降低服务器压力。 **一、jQuery LazyLoad.js 插件原理** jQuery LazyLoad.js 的核心思想是只加载视口内...

    图片延迟加载显示代码Jquery.LazyLoad.js改良版

    从网上下载来的版本多多少少都...没解决方案,就得发挥咱DIY的精神,自己想法解决,分析了BUG,理了理思路,结合前段时间我做弹出窗口特效的方法,解决了Jquery.LazyLoad.js的兼容问题,现将思路和方法与大家分享一下。

    jquery.lazyload

    `jQuery.lazyload` 是一个优秀的jQuery插件,它允许我们在页面滚动时按需加载图片,从而显著提高页面加载速度。 ### 1. 懒加载概念 懒加载是一种延迟加载策略,主要针对非首屏内容,尤其是大尺寸图片。当用户滚动...

    lazyload.js图片延迟加载(懒加载)插件

    - **jquery.lazyload.js**:这是懒加载插件的核心文件,包含了实现图片延迟加载功能的JavaScript代码,需要在网页中引入并进行适当配置。 - **图片延迟加载(懒加载)jQuery插件**:可能是一个包含使用该插件的HTML、...

    【ZT】图片延迟加载 jquery.lazyload插件

    标题中的“【ZT】图片延迟加载 jquery.lazyload插件”指的是使用jQuery库的一个扩展插件——jQuery Lazyload,该插件主要用于实现图片的延迟加载技术。延迟加载是一种优化网页性能的方法,它允许图片在用户滚动到...

    jquery lazyload延时加载

    1. **引入 jQuery 和 LazyLoad**:首先确保页面中已经引入了 jQuery 库,然后引入 LazyLoad 的 JavaScript 文件,如 `jquery.lazyload.js`。 2. **设置 HTML 结构**:给需要延时加载的图片添加特定的类名(如 `lazy...

    图片延迟加载 lazyload

    然后引入 jQuery.lazyload 插件,如 `jquery.lazyload.min.js` 文件,提供延迟加载的功能。 2. **HTML 结构**:在 HTML 中,为需要延迟加载的图片添加特定的类名(通常是 `.lazyload`),同时设置 `data-src` 属性...

    JQuery Lazyload加载图片实例

    为了解决这一问题,jQuery 提供了一个插件——jQuery Lazyload,它允许我们实现图片的延迟加载(也称为懒加载),即图片只在用户滚动到可视区域时才开始加载。这种方式可以显著提升网页的加载速度,特别是对于拥有...

    JQuery LazyLoad 图片懒加载实例

    为了解决这一问题,我们可以使用`jQuery LazyLoad`插件实现图片的延迟加载,即“懒加载”。本文将详细介绍如何利用jQuery LazyLoad来实现图片的懒加载功能,并通过实例进行演示。 ### 1. jQuery LazyLoad 插件简介 ...

Global site tag (gtag.js) - Google Analytics