注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

snoopyxdy的博客

https://github.com/DoubleSpout

 
 
 

日志

 
 

Jquery.DelayLoad.js - 延迟加载网页图片插件  

2011-06-24 17:19:58|  分类: web前端技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
功能为延迟加载网页上的图片,只有滚动条拉到该图片的位置,才会去发请求下载图片,可以让页面更快的加载。
特别适用于页面比较高,图片比较多,而且藏的比较深的页面,例如论坛,博客等。
网上有很多这类插件,但是功能都太过多余,这个脚本只有核心功能,优化了代码可以提高运行效率,
在IE6.0+  FF5.0   CHROME OPERA  safari 测试通过,欢迎2次开发!

使用方法很简单,目前就实现2个参数:
 $(".delayload").DelayLoad({
            oringal: 'oringal',                         //用来存放真实该图片地址,默认为oringal
            defaultimg : 'load.png'                //用来存放缺省图片的地址,默认为空
});
图片代码这么写,红色的代码是可以用户自定义的。
<img src=“” oringal=“evo.png” class=“delayload” />      

之前由于疏忽有个小BUG,即图片在第一屏的时候不滚动SCROLL不会加载,现在新放了一个版本,修正了这个BUG,并且优化了部分代码,重新压缩过了!

靠竟然不能放附件!算了放代码吧:

1、先放google Closure Compiler压缩过的,直接保存为Jquery.delayload.js或是放在有jquery环境的js脚本中即可。
(function(a){a.fn.DelayLoad=function(g){function d(a,c){this.count=a;this.end=function(){if(this.count<1)return!0};this.oringal=c}var e={oringal:"oringal",defaultimg:""};a.extend(e,g||{});var c=this;d.prototype.initialize=function(b){a(this).attr("src",b)};d.prototype.show=function(b){if(a(window).height()+a(window).scrollTop()>=b.position_h)a(b).attr("src",a(b).attr(this.oringal)),b.loaded=!0,this.count--,c=a(a.grep(c,function(a){return!a.loaded}))};d.prototype.scrolling=function(){var b=this;c.each(function(){b.show(this)});
if(b.end())return a(window).unbind("scroll"),!1};var f=new d(c.length,e.oringal);c.each(function(){e.defaultimg!==""&&f.initialize.call(this,e.defaultimg);this.position_h=a(this).offset().top;f.show(this)});a(window).bind("scroll",function(){f.scrolling()})}})(jQuery);




2、再放developer版本,有详细注释:

/*
 *
delayload- jQuery plugin for delay loading images
 *
 * Copyright (c) 2011-2011 Spout
 *
 * This is the min-version and reconstruction for jquery.lazy.load.js
 *
 * Jquery.
delayload.js is object-oriented, it do faster than jquery.lazy.load.js
 *
 * Thanks Mika Tuupola!
 *
 * Version:  1.1.0
 *
 */
(function($) {
$.fn.DelayLoad = function(options) {
         var settings = {
                     oringal: 'oringal',                   //图片源的自定义属性
                     defaultimg : ''                        //缺省图片设置
                };
        $.extend(settings, options||{});
        var self = this;                                 //此处的this为jquery对象
        function DelayImg(length, oringal){
            this.count = length;                   //记录数,用来记录还有多少图片没有加载
            this.end = function(){                       //判断是否全部已经加载    
                    if(this.count<1){return true;}
                };
this.oringal = oringal; //用来记录用户自定义的源属性
            }
        DelayImg.prototype.initialize = function(i){
            $(this).attr('src', i)    //初始化设置图片SRC为缺省图片
        };
        DelayImg.prototype.show = function(thisimg){
var now_h =  $(window).height() + $(window).scrollTop();        //获得当前高度,每次得重复计算
if(now_h>=thisimg.position_h ){                                //判断是否已经到达当前高度
              $(thisimg).attr('src',$(thisimg).attr(this.oringal));  //显示图片,要加一些特效可以加在这里
                            thisimg.loaded = true;
this.count--;                                        //计数器减1
                            self = $($.grep(self, function(n, i){                //将已经加载的图片踢出self数组
                                    return !n.loaded;
                                }));                                       
                    }
        };
        DelayImg.prototype.scrolling  = function(){        //当scrolling时触发这个方法
            var that = this;
                self.each(function(){
                    that.show(this)
                });
 if(that.end()){                                                //如果计数器为0的时候触发,接触scroll的绑定
                    $(window).unbind('scroll');
                    return false;
                 }
            };
        var delay_img = new DelayImg(self.length, settings.oringal);    //实例化
        self.each(function(){    //初始化
        if(settings.defaultimg !== ''){                  //如果缺省小图片不存在的话
            delay_img.initialize.call(this, settings.defaultimg);
        }
            this.position_h = $(this).offset().top;   //用来存放这个element相对于整个窗口的高度,方便以后读取
delay_img.show(this);   //将第一屏的图片显示出来
        })
        $(window).bind('scroll', function(){delay_img.scrolling();})
}
})(jQuery);
  评论这张
 
阅读(1365)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2016