ImagesLazyLoad 图片延迟加载效果

之前在做一个图片浏览效果时,要看后面的小图必须等到前面的加载完,而且大图的位置是在大量的小图后面,导致大图要等到小图都加载完才能显示,为了解决这个问题,就想到了Lazyload效果。
现在很多网站都用了类似的效果,如淘宝、Bing等。
这个图片延迟加载效果是在Lazyload的基础上扩展的,主要扩展了获取img元素,获取src和图片加载的部分。

兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0
其中safari和chrome部分功能不支持。


效果预览

图片延迟加载:共有图片 张,未载入

 

程序说明

【获取图片】

先定义filter函数作为筛选程序:

代码
var getSrc = opt.getSrc,
    filter 
= $$F.bind( this._filter, this,
            opt[
"class"],
            getSrc 
? function(img){ return getSrc(img); }
                : 
function(img){ return img.getAttribute( attribute ) || img.src; },
            opt.holder
        );


然后用这个filter函数筛选出需要的图片集合:

this._elems = $$A.filter(
        opt.images 
|| container.getElementsByTagName("img"), filter
    );

如果要自定义图片集合可以在程序可选参数的images属性来设置,否则自动从容器获取img元素作为图片集合。

这里的filter其实是包装了筛选样式cls、获取src的方法getSrc和占位图holder三个参数的_filter筛选程序。
在_filter程序中,会对图片集合进行筛选和整理。
如果自定义了"class"筛选样式,会自动排除样式不对应的图片:

if ( className && (" " + img.className + " ").indexOf(" " + className + " "== -1 ) return false;


再用getSrc获取原图地址,即实际要显示的图片地址。
如果有自定义getSrc会优先使用。
没有的话,再通过保存原图地址的_attribute自定义属性从元素获取。
最后才直接从元素的src属性获取。

接着排除src不存在的:

if ( !src ) return false;


要注意处理原图地址就是元素当前src的情况:

if ( src == img.src ) {
    
if ( img.complete || $$B.chrome || $$B.safari ) return false;
    img.removeAttribute(
"src");
}

如果complete为true,说明图片已经载入完成了,可以排除;
如果是chrome或safari,不能取消当前加载,所以也排除掉(具体看图片的HTTP请求部分)。
否则,用removeAttribute移除src属性来取消图片当前的加载。

如果设置了holder占位图,就重新设置图片src:

if ( holder ) { img.src = holder; }


最后把原图地址记录到元素的_attribute自定义属性中:

img.setAttribute( this._attribute, src );


逐个图片元素筛选整理后,就得到要加载的图片集合了。


【图片加载】

ImagesLazyLoad相比LazyLoad,已经实现了_onLoadData加载程序,不需要再自己定义加载。
在_onLoadData程序中,主要是用来显示图片。

先用_hasAttribute方法判断是否有_attribute自定义属性。
在_hasAttribute方法中是这样判断的:

this._hasAttribute = $$B.ie6 || $$B.ie7
    
? function(img){ return attribute in img; }
    : 
function(img){ return img.hasAttribute( attribute ); };

由于ie6/7跟其他浏览器对attribute和property的理解不同,所以要分开处理,详细参考这里的attribute/property
为了保证兼容性,程序会优先使用attribute的方式来操作自定义属性。

当img有_attribute自定义属性时,就用getAttribute来获取原图地址,并设置img的src,在用removeAttribute来移除自定义属性。
移除的意义在于,当有多个实例使用同一个元素时,能保证图片加载一次后就不会重复加载,即防止实例间的冲突。


【图片的HTTP请求】

这里说说开发过程中发现的一些关于图片加载的问题。

首先是加载空字符串的问题,如果给img的src设为空字符串的话,可能会得到意料之外的结果。
例如在 http://xxx/test.htm 里面的 <img src=""> 会发生以下情况:
ie 会产生相对地址的请求,即:http://xxx/
Safari/Chrome 会产生当前页面地址的请求,即:http://xxx/test.htm
Opera/Firefox 不会产生请求
详细参考Nicholas C. Zakas的“Empty image src can destroy your site”。
如果不想加载图片,不应该把src设为空值,因为还可能会发出请求,浪费资源。
可以像程序那样,通过removeAttribute来移除就行了。

还有一个问题是在Safari和Chrome,由于webkit内核的bug,正在加载的图片并不能取消加载。
所以程序在取消图片加载的部分,如果是Safari或Chrome会继续加载,不进行延迟。
这个问题最初从lifesinger的datalazyload的说明部分看到的,具体可以自己用Fiddler来测试。

更多相关资料可以参考lifesinger的“图片的HTTP请求”。


【继承结构】

在发布的程序中,这是第一个用了继承的,本人平时也没怎么用到,所以还不成熟,算是试试水吧。
程序用wrapper来做继承,详细参考工具库的说明
先用wrapper给ImagesLazyLoad包装(继承)LazyLoad:

var ImagesLazyLoad = $$.wrapper(function(options) {
    ...
}, LazyLoad);


再用extend扩展prototype,添加子类的方法函数:

$$.extend( ImagesLazyLoad.prototype, {
  ...
});


其中_initialize方法用来设置子类属性,由于覆盖了父类的同名方法,所以要通过LazyLoad.prototype._initialize来调用,还要注意用call来修正this。

还有_setOptions方法用来设置子类的可选属性:

return LazyLoad.prototype._setOptions.call(this, $$.extend({
    ...
}, $$.extend( options, {
    onLoadData:    
this._onLoadData
})));

子类的_setOptions方法也覆盖了父类的方法,解决方法同_initialize。
其中第一个参数是子类的可选属性,第二个参数是子类定义的属性,即不再是可选而是由程序来定义的属性。

总体来说,这是个简陋的继承,等以后积累了一定经验再来扩展吧。


使用技巧

【设置src】

有几个方法可以设置原图地址:
1,正常设置src:渐进增强,不支持js时也能显示,但chrome和safari有bug,不支持这种方式;
2,把原图地址设置到自定义属性中:所有浏览器都兼容,但在不支持js时图片不能显示;
3,用自定义函数获取:使用在比较复杂的情况,需要手动设置。
具体还是要根据实际情况来选择。

【设置holder】

如果使用了holder占位图,程序会自动设置图片元素显示占位图。
推荐使用loading图片来设置,但loading图往往跟原图的尺寸是不同的。
如果img设置了原图宽高,又想保持loading图的尺寸,把它设为背景就可以了。
但这样在ie下,不设置src默认会有一个小图标。
要去掉这个小图标可以设置holder为一个透明图片的链接,或者参考这里的TRANSPARENT“做”一个透明图片。
实例中也是这样设置的,可以参考一下。

【执行程序】

千万不能在window.onload中执行,因为那时图片都已经加载完了。
而应该在容器后面(window的话是文档结尾)或DOMContentLoaded中执行。


程序源码 

代码
var ImagesLazyLoad = $$.wrapper(function(options) {
    
this._initialize( options );
    
//如果没有元素就退出
    if ( this.isFinish() ) return;
    
//初始化模式设置
    this._initMode();
    
//进行第一次触发
    this.resize(true);
}, LazyLoad);

$$.extend( ImagesLazyLoad.prototype, {
  
//初始化程序
  _initialize: function(options) {
    LazyLoad.prototype._initialize.call(
this, [], options);
    
//设置子类属性
    var opt = this.options;
    
this.onLoad = opt.onLoad;
    
var attribute = this._attribute = opt.attribute;
    
//设置加载图片集合
    var getSrc = opt.getSrc,
        filter 
= $$F.bind( this._filter, this,
                opt[
"class"],
                getSrc 
? function(img){ return getSrc(img); }
                    : 
function(img){ return img.getAttribute( attribute ) || img.src; },
                opt.holder
            );
    
this._elems = $$A.filter(
            opt.images 
|| this._container.getElementsByTagName("img"), filter
        );
    
//判断属性是否已经加载的方法
    this._hasAttribute = $$B.ie6 || $$B.ie7
        
? function(img){ return attribute in img; }
        : 
function(img){ return img.hasAttribute( attribute ); };
  },
  
//设置默认属性
  _setOptions: function(options) {
    
return LazyLoad.prototype._setOptions.call(this, $$.extend({//默认值
        images:        undefined,//图片集合
        attribute:    "_lazysrc",//保存原图地址的自定义属性
        holder:        "",//占位图
        "class":    "",//筛选样式
        getSrc:        undefined,//获取原图地址程序
        onLoad:        function(){}//加载时执行
    }, $$.extend( options, {
        onLoadData:    
this._onLoadData
    })));
  },
  
//筛选整理图片对象
  _filter: function(cls, getSrc, holder, img) {
    
if ( cls && img.className !== cls ) return false;//排除样式不对应的
    //获取原图地址
    var src = getSrc(img);
    
if ( !src ) return false;//排除src不存在的
    if ( src == img.src ) {
        
//排除已经加载或不能停止加载的
        if ( img.complete || $$B.chrome || $$B.safari ) return false;
        img.removeAttribute(
"src");//移除src
    }
    
if ( holder ) { img.src = holder; }
    
//用自定义属性记录原图地址
    img.setAttribute( this._attribute, src );
    
return true;
  },
  
//显示图片
  _onLoadData: function(img) {
    
var attribute = this._attribute;
    
if ( this._hasAttribute( img ) ) {
        img.src 
= img.getAttribute( attribute );
        img.removeAttribute( attribute );
        
this.onLoad( img );
    }
  }
});

 

完整实例下载

posted @ 2010-03-03 09:16 cloudgamer 阅读(...) 评论(...) 编辑 收藏