delayload组件

组件说明：

该脚本可以动态加载第二屏幕以下的图片，即随用户滚动页面的时候加载图片类似jQuery的lazyLoad插件，较之lazyLoad，delayImage的优点为：不单单可以动态加载图片img，还可以加载背景图片、滚动到某个dom的时候执行绑定该dom的事件，只加载视窗内的图片（如快速拉到第三屏，第二屏的图片是不会加载的）。不会出现图片已经加载完了然后才运行lazyLoad的情况。缺点为：必须手动对每个需要动态加载的对象添加一个属性delayLoad，当然，也可以改成自动检测图片然后动态加载，但如果那样的话，就跟lazyLoad插件一样了

使用方法：

1、准备

必须把该脚本放在页面底部，也可以延迟加载。

 
http://ossweb-img.qq.com/images/js/comm/delayImage.min.js

2、图片

 
<img src="javascript:" height="119" width="100">

为啥把src写成“javascript:”，而不是about:blank或空，或空白图片占位符，可以自己去研究...

3、背景

1）在需要动态加载的block标签上，添加delayLoad属性，该属性值为需要加载的背景的图片路径，当然，需要加载背景的对象必须是有尺寸大小，不然体验不佳：

 
<div delayload="http://ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg" style="height: 119px;"></div>

1）在需要动态加载的div上，添加delayLoad属性，该属性值为需要加载的背景的图片路径，当然，需要加载背景的对象必须是有尺寸大小的，不然体验不佳：

 
 
.b1{height:119px;background-position:0 0;background-repeat:no-repeat}
.d1{background-image:url(http://ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg)}
 
<div delayload="d1" class="b1"></div>

4、事件

把需要滚动执行的方法（函数）名挂在dom上，滚动到该dom节点的时候，会执行该方法,例如：

 
<div id="iframeWrap" delayload="loadIframe()"></div>
 
 
 
 
function loadIframe(){
    var o=document.getElementById('iframeWrap');
    o.innerHTML='<iframe allowtransparency="true" src="http://cf.qq.com/web200905/inc/ifr_shop_new.htm" frameborder="0" height="170" scrolling="no" width="202"></iframe>';   
}

关于milo版本

JS调用方法

需要引入milo

 
http://ossweb-img.qq.com/images/js/milo/milo-min.js
 
need(["biz.delayLoad"]);

milo版本新增功能说明

一、分解了主函数，对部分逻辑进行调整，加快了默认可视范围的显示/执行速度（无需进入队列循环直接执行）

二、新增了一个对外接口lazyLoad(ele/*需要延迟加载的DOM对象*/,fn/*需要延迟加载绑定到DOM上的方法*/)，利用这个接口，可以实现：

调用方法：

 
<div delayload="test()" id="testIframe"></div>
 
 
 
 
 
 
 
 
 
 
 
 
function test(){
    var o=document.getElementById('testIframe');
    o.innerHTML='hi...';
}
 
 need(["biz.delayLoad-min"],function(D){
   var imgs = document.images,l = imgs.length;
   for(var i=0;i < l;i++){
       D.lazyLoad(imgs[i],function(){this.style.border = "1px solid #f00";});//注意：调用方式为d.lazyLoad(ele,function(){}/*fn name*/)
   }
   D.lazyLoad(g("testIframe"),test);
   //或者：D.lazyLoad(g("testIframe"),function(){this.innerHTML='.............';});
});

demo;