动态加载delayload组件

当前版本:V1 最近更新:2013-05-02 组件作者:xy

 

组件说明:

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

更新日志

说明:后续不会独立为此插件做功能更新(重大bug除外),只在milo里面更新。

  • 2011/10/23 优化了性能,对局部函数做了改写,同时调整了滚动执行的阀值,从250ms调整到150ms。
  • 2011/2/17 做了些小优化。
  • 2011/1/25 添加了可以动态触发加载第二屏资源,比如,第二屏幕的iframe,脚本等等,使用方法:例如可以在某个节点的delayLoad上写上函数名,当该节点滚动到屏幕中间的时候,就会触发该函数,你可以在该函数里面做你想要做的。<div style="height:253px;" delayLoad="test()" id="testIframe"></div>
  • 2010/9/08 发布

使用方法:

1、准备

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

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

2、图片

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

3、背景

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

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)}

4、事件

把需要滚动执行的方法(函数)名挂在dom上,滚动到该dom节点的时候,会执行该方法,例如:

function loadIframe(){
	var o=document.getElementById('iframeWrap');
	o.innerHTML='';    
}

关于milo版本

JS调用方法

需要引入milo

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

milo版本新增功能说明

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

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

调用方法:

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;