js延迟加载
页面要延迟加载的图片做如下修改：
<img tsrc="http://productimg.xing800.com${mimg}" src="http://img.xing800.com/zhuanti/gun.gif" name="lazy" width="220" height="150" alt="${groupbuy.title}" />
js：
var windowOffset;
var windowSize;
var lazys = new Array();
function getWindowOffset() {
var offset = {
x : 0,
y : 0
};
if (typeof window.pageXOffset != 'undefined'
|| typeof window.pageYOffset != 'undefined') {
offset.x = window.pageXOffset;
offset.y = window.pageYOffset;
} else if (typeof document.compatMode != 'undefined'
&& document.compatMode == 'CSS1Compat') {
offset.x = document.documentElement.scrollLeft;
offset.y = document.documentElement.scrollTop;
} else if (typeof document.body != 'undefined'
&& (document.body.scrollLeft || document.body.scrollTop)) {
offset.x = document.body.scrollLeft;
offset.y = document.body.scrollTop;
}
return offset;
}
function getObjOffset(element) {
var objOffset = {
x : 0,
y : 0
};
if (arguments.length != 1 || element == null) {
return null;
}
objOffset.x = element.offsetLeft;
objOffset.y = element.offsetTop;
while (element = element.offsetParent) {
objOffset.x += element.offsetLeft;
objOffset.y += element.offsetTop;
}
return objOffset;
}
function getWindowSize() {
var client = {
x : 0,
y : 0
};
if (typeof document.compatMode != 'undefined'
&& document.compatMode == 'CSS1Compat') {
client.x = document.documentElement.clientWidth;
client.y = document.documentElement.clientHeight;
} else if (typeof document.body != 'undefined'
&& (document.body.scrollLeft || document.body.scrollTop)) {
client.x = document.body.clientWidth;
client.y = document.body.clientHeight;
}
return client;
}
function getObjSize(element) {
var objSize = {
x : 0,
y : 0
};
if (arguments.length != 1 || element == null) {
return null;
}
objSize.x = element.offsetWidth;
objSize.y = element.offsetHeight;
return objSize;
}
function getLazys() {
var imgs = document.getElementsByName("lazy");
var lazys = new Array();
for (i = 0; i < imgs.length; i++) {
var tmp = new Object;
tmp.element = imgs[i];
tmp.tsrc = imgs[i].getAttribute("tsrc");
tmp.x = getObjOffset(imgs[i]).x;
tmp.y = getObjOffset(imgs[i]).y;
tmp.w = getObjSize(imgs[i]).x;
tmp.h = getObjSize(imgs[i]).y;
lazys.push(tmp);
}
return lazys;
}
function loadimg() {
if (typeof lazys == 'undefined')
return;
for (i = 0; i < lazys.length; i++) {
if (lazys[i].x + lazys[i].w > windowOffset.x
&& lazys[i].x < windowOffset.x + windowSize.x
&& lazys[i].y + lazys[i].h + 200 > windowOffset.y
&& lazys[i].y < windowOffset.y + windowSize.y + 200) {
if (lazys[i].element.getAttribute("tsrc") != null) {
lazys[i].element.src = lazys[i].tsrc;
lazys[i].element.removeAttribute("tsrc");
lazys.splice(i, 1);
i--;
}
}
}
}
function init() {
lazys = getLazys();
lazyLoad();
}
function lazyLoad() {
windowOffset = getWindowOffset();
windowSize = getWindowSize();
loadimg();
if (lazys.length == 0) {
clearTimeout(timer);
}
}
var timer;
init();
timer = setInterval(lazyLoad, 200);
http://shop68305897.taobao.com
我的淘宝店
支持下
帮我刷刷行用