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

我的淘宝店

支持下

帮我刷刷行用