最新消息:

动态加载第二屏图片

优化类 knitter 119浏览

脚本简介:

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

脚本使用:

1、准备

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

2、图片

图片需要设定原始尺寸,把src熟悉设置为blank.png,如下,blank.png图片是一个1px的透明图片,然后在delayLoad属性上填写该图片的真是路径:

[html]
<img src="http://ossweb-img.qq.com/images/comm/blank.png" width="1000" height="119" delayLoad="http://ossweb-img.qq.com/images/qqgame/act/20100827seventh/i_pic_01.jpg" />
[/html]

3、背景

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

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

2)delayLoad属性不但可以填写图片路径,也可以填写样式类的名称,例如,

[html]
.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)}
[/html]

[html]
<div class="b1" delayLoad="d1"></div>
[/html]

3、调用

调用统一使用该链接,以方便管理:

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

4、调用

使用实例:http://game.qq.com/hr/join2010/index.htm

维护:

对该脚本有任何疑问均可联系xy

更新:

2011.1.25:

添加了可以动态触发加载第二屏资源,比如,第二屏幕的iframe,脚本等等,使用方法:例如可以在某个节点的delayLoad上写上函数名,当该节点滚动到屏幕中间的时候,就会触发该函数,你可以在该函数里面做你想要做的。<div style=”height:253px;” delayLoad=”test()” id=”testIframe”></div>

2011.2.17:

做了些小优化。

脚本源代码:

[js]
/**
* @author xylonhuang
* @version 0.0.4
* @date 2011.2.17
* delayLoad="image’s src/class/function name()"
*/
;(function(doc){
var arrDelaySeq = new Array(new Array(), new Array(), new Array()), objTag = doc.getElementsByTagName(‘*’), intLen = objTag.length, intTop, showTime = null,i=0;
while (intLen–) {
if (objTag[intLen].nodeType != "1") {
continue
}
if (!(objTag[intLen].attributes[‘delayLoad’])){
continue
}
var strAtt = objTag[intLen].attributes[‘delayLoad’].nodeValue;
if (strAtt != null && strAtt != "undefined" && strAtt != ”) {
intTop = offset(objTag[intLen]);
arrDelaySeq[i]=new Array(objTag[intLen], strAtt, intTop);
i++;
}
}
function offset(o){
var y = o.offsetTop;
if (o.style.position == ‘absolute’)
return y;
while (o = o.offsetParent) {
y += o.offsetTop;
}
return y;
}
function scroll(){
return doc.body.scrollTop || doc.documentElement.scrollTop;
}
function attach(e, name, func, cap){
if (e.addEventListener) {
e.addEventListener(name, func, cap);
}
else
if (e.attachEvent) {
e.attachEvent(‘on’ + name, func);
}
}
function wh(){
return (window.innerHeight) ? window.innerHeight : (doc.documentElement && doc.documentElement.clientHeight) ? doc.documentElement.clientHeight : doc.body.offsetHeight
}
function isIMG(s){
var regImg = /\.jpg$|\.jpeg$|\.png$|\.gif$/i;
return regImg.test(s)
}
function lazyShow(){
if (showTime != null) {
clearTimeout(showTime)
}
var i = arrDelaySeq.length;
while (i–) {
if (arrDelaySeq[i][0] == null) {
continue
}
var a = arrDelaySeq[i][0], b = arrDelaySeq[i][1], c = arrDelaySeq[i][2], h = wh(), sh = scroll(), it = parseInt(h) + parseInt(sh);
if (isNaN(it)) {
arrDelaySeq[i][0] = arrDelaySeq[i][1] = arrDelaySeq[i][2] = null;
continue
}
if (c < it) {
if(b.indexOf("()")!=-1){
(function(){var _fun=b;setTimeout(function(){(new Function("return "+_fun))()},200);})();
}else{
isIMG(b) ? (a.nodeName == "IMG" ? (a.src = b) : (a.style.backgroundImage = "url(" + b + ")")) : (a.className == ” ? (a.className = b) : a.className += " " + b)
}
a.removeAttribute("delayLoad");
arrDelaySeq[i][0] = arrDelaySeq[i][1] = arrDelaySeq[i][2] = null;
}
}
}
attach(window, "scroll", function(){
showTime = setTimeout(lazyShow, 200)
});
attach(window, "resize", function(){
showTime = setTimeout(lazyShow, 300)
});
attach(window, "unload", function(){
arrDelaySeq = objTag = intLen = intTop = showTime = null
});
lazyShow();
})(document);
[/js]

下载实例:

下载

转载请注明:文档库 » 动态加载第二屏图片