页面要延迟加载的图片做如下修改:
<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
我的淘宝店
支持下
帮我刷刷行用
分享到:
相关推荐
原生js面向对象写的延迟加载效果,自动播放轮播图,无缝滚动三个效果页面。
js设置延迟加载、
利用 data-* 属性延迟加载图片的JavaScript微型库
类似校内网,微博 js延时加载,滚动条,随滚动条逐渐显示信息
今天共享一个DIY的利用JS来延迟加载图片的插件。 大概的实现方式是:页面的定义元素img时,将src统一替换成自定义的一个属性名,如叫“originalSrc”,然后利用JS把给img的src设置为一个定义好的等待图片,然后在...
通用的延迟加载工具LazyLoad,支持下载多个JavaScript文件,并能保证在所有浏览器中都以正确的顺序执行,同时还能加载CSS文件
JS延迟加载百度分享代码提高网页速度
页面延迟加载源码下载,图片延迟加载源码下载,jquery页面延迟加载,页面延迟加载技术实现分析
第一 JS延迟加载 代码如下: [removed][removed] [removed] setTimeout(“document.getElementById(‘my’).src=’include/common.php’; “,3000);//延时3秒 [removed] 一般情况下都是利用setTimeout来实现 ...
这个图片延迟加载效果是在Lazyload的基础上扩展的,主要扩展了获取img元素,获取src和图片加载的部分。 兼容:ie6/7/8, firefox 3.5.5, opera 10.10, safari 4.0.4, chrome 3.0 其中safari和chrome部分功能不支持。
JavaScript 封装的延迟加载技术示例 JavaScript 封装的延迟加载技术示例,可以用于加载容器、加载DIV以及加载图片等,可有效降低浏览器损耗,有兴趣可以尝试一番。
延迟加载
js页面图片延迟加载特效是一款仿淘宝商城商品页面图片延迟加载效果,滚动条滚动到图片时再执行加载,添加了一个渐现效果 js页面图片延迟加载特效图:
页面延迟加载JS包 lazyload.js scrollloading.js
关于静态资源本地缓存的实战经验,探索过程,还会有意外的收获额~ 关于图片资源延时加载的实现过程,外加源代码
和 Lazy Load 一样,这个插件也是一个用于图像延迟加载 JavaScript。不同的是 Lazy Load 是基于 jQuery 的插件,而它不依赖于 jQuery 或其他 JavaScript 库,可独立使用。并且 它 非常小巧,压缩后不足 1KB,兼容ie8...
Echo.js 也是一个用于图像延迟加载 JavaScript
html延迟加载JS和CSS 支持ie6和ie6以上任何浏览器
通过延迟加载来实现按需加载,达到节省资源,加快浏览速度的目的。