`
desert3
  • 浏览: 2140726 次
  • 性别: 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

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

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

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

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

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

    延迟加载图片jquery.lazyload.js

    延迟加载图片jquery.lazyload.js 延迟加载图片jquery.lazyload.js

    jquery 延迟加载JS jquery.lazyload.js

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

    jquery.lazyload.min.js

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

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

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

    jquery.lazyload.js

    jquery图片延迟加载插件,支持响应事件加载

    jquery.lazyload 实现图片延迟加载jquery插件

    怎么实现ImageLazyLoad 一、使用JQuery插件 ,插件名: jquery.lazyload(7kb大小),压缩后(3kb大小) 在线压缩js http://closure-compiler.appspot.com/home 虽然是很牛X的特效,不过用JQuery插件只需要短短几句...

    Jquery图片延迟加载插件jquery.lazyload.js的使用方法

    主要介绍了Jquery图片延迟加载插件jquery.lazyload.js的使用方法,需要的朋友可以参考下

    Jquery.LazyLoad.js修正版下载,实现图片延迟加载插件

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

    jquery tab选项卡插件 轻量级tab选项卡插件支持鼠标滑过、点击、自动切换、数据回调等功能

    jquery tab插件制作多功能选项卡,鼠标滑过切换选项卡、鼠标点击切换选项卡、自动切换选项卡、支持数据回调功能,也可以与其他插件结合jquery.lazyload,制作选项卡切换图片延迟加载等

    jquery图片延迟加载

    &lt;script src="jquery.lazyload.js" type="text/javascript"&gt;&lt;/script&gt; 2.在你的页面中加入如下的javascript: $("img").lazyload(); 这将会使所有的图片都延迟加载。 当然插件还有几个配置项可供设置。 1....

    jQuery图片预加载代码.zip

    jQuery图片预加载代码是一款基于ydxLazyLoad.js插件实现的图片延迟加载特效。

    jquery.lazy_content:用于延迟加载任何内容的 jquery 插件

    任何内容的延迟加载变得容易 任何内容 包括src/jquery.lazy_content.js $ ( ".elements" ) . lazyContent ( { threshold : 0 , // The amount of pixels to load earlier load : function ( element ) { // ...

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

    该资源包含lazyload.js、jquery2.1、还有个小Demo可供参考

    jquery_lazyload

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

    jQuery图片延迟加载插件Lazy Load.zip

    jQuery图片延迟加载插件Lazy Load,在网页上出现大量图片的时候,一下加载全部图片需要加载比较长的时间,懒加载的目的就是减少加载时间,按需加载从而达到提升用户体验的目的。

Global site tag (gtag.js) - Google Analytics