JS实现图片延迟加载
2012-04-09 12:03
615 查看
一、JS实现图片延迟加载
1、引入jquery.lazyload.js文件
2、然后将页面中需要延迟加载的图片进行一定处理，src就不是图片真正的路径，
而是本地的一张默认的初始化图片，真正的图片的路径放在lazyload属性中
3、这样就可以实现图片的延迟加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>t</title>
<script type="text/javascript" src="jquery.lazyload.js"></script>
</head>
<body>
<img src="本地图片路径" lazyload="网络上面需要下载的图片路径" height="48px" width="48px"/>
</body>
</html>
二、延迟加载js代码：
/*
图片延迟加载原始版本
图片加载的顺序只能是从上到下，不能是可见区域的图片加载。
如果进行分页时，处于浏览器的底部，就根本没有图片延迟加载的效果，图片全部被加载完了
*/
var lazyLoad = {
Init: function () {
return $("img[lazyload]");
},
Calculate: function (lazyloadobject) {
var windowHeight = $(window).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
lazyloadobject.each(function (i) {
_scrollTop = parseInt($(this).offset().top - windowHeight);
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
arrReturn[_scrollTop].push($(this));
});
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
IsLoad: function (scrolltop, objectstop) {
if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
if (parseInt(i) <= scrolltop && this.ArrLoad.hasOwnProperty(i)) {
for (j = 0; j < this.ArrLoad[i].length; j++) {
this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
}
delete this.ArrLoad[i];
}
}
}
},
Run: function () {
var lazyLoadObject = this.Init();
this.Calculate(lazyLoadObject);
arrScrollTop = this.ArrLoad;
if (arrScrollTop == null) {
return false;
}
else {
var _this = this;
_this.IsLoad($(window).scrollTop(), arrScrollTop);
$(window).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}
/**
图片延迟加载修改版本01：适用于普通的页面，没有嵌套在iframe中的页面实现图片延迟加载
图片加载的顺序是对可见区域的图片进行加载，滚动条滚到哪部分就进行哪部分图片的加载
*/
var lazyLoad = {
/**
* 初始化函数，获得当前页面中含有lazyload属性的img标签
*/
Init: function () {
return $("img[lazyload]");
},
/**
* 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
*/
Calculate: function (lazyloadobject) {
/**
* 获得浏览器中可见区域的高度
*/
var windowHeight = $(window).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
/**
* 依次循环当前页面中所有的img对象
*/
lazyloadobject.each(function (i) {
/**
* 计算img到浏览器顶部的距离
*/
_scrollTop = parseInt($(this).offset().top);//parseInt($(this).offset().top - windowHeight);
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
/**
* 距离一样就放到同一个数组中
*/
arrReturn[_scrollTop].push($(this));
});
/**
* 获得图片的高度
*/
this.ImgHeight = $(lazyloadobject[0]).attr("height");
/**
* 处理好以后的img对象数组
*/
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
/**
* 图片高度
*/
ImgHeight: null,
/**
* 进行图片的加载
*/
IsLoad: function (scrolltop, objectstop) {
/**
* 浏览器可见区域底部的高度
*/
var maxScrollTop = parseInt(scrolltop + $(window).height());
if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
/**
* 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
*/
if (parseInt(i) >= scrolltop && parseInt(i) <= maxScrollTop && this.ArrLoad.hasOwnProperty(i)) {
for (j = 0; j < this.ArrLoad[i].length; j++) {
this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
}
delete this.ArrLoad[i];
}
}
}
},
/**
* 执行函数，调用相关的函数进行图片延迟加载的处理
*/
Run: function () {
var lazyLoadObject = this.Init();
this.Calculate(lazyLoadObject);
arrScrollTop = this.ArrLoad;
if (arrScrollTop == null) {
return false;
}
else {
var _this = this;
_this.IsLoad($(window).scrollTop(), arrScrollTop);
/**
* 触发浏览器滚动条滚动事件
*/
$(window).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}
/**
图片延迟加载修改版本02：适用于嵌套在iframe中的页面实现图片延迟加载
图片加载的顺序是对可见区域的图片进行加载，滚动条滚到哪部分就进行哪部分图片的加载
*/
var lazyLoad = {
/**
* 初始化函数，获得当前页面中含有lazyload属性的img标签
*/
Init: function () {
return $("img[lazyload]");
},
/**
* 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
*/
Calculate: function (lazyloadobject) {
/**
* 获得浏览器中可见区域的高度
*/
var windowHeight = $(window.parent).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
/**
* 依次循环当前页面中所有的img对象
*/
lazyloadobject.each(function (i) {
/**
* 计算img到浏览器顶部的距离
*/
_scrollTop = parseInt($(this).offset().top) + $(window.parent.document).find("iframe[id=zhy_iframe]").offset().top;
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
/**
* 距离一样就放到同一个数组中
*/
arrReturn[_scrollTop].push($(this));
});
/**
* 获得图片的高度
*/
this.ImgHeight = $(lazyloadobject[0]).attr("height");
/**
* 处理好以后的img对象数组
*/
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
/**
* 图片高度
*/
ImgHeight: null,
/**
* 进行图片的加载
*/
IsLoad: function (scrolltop, objectstop) {
/**
* 浏览器可见区域底部的高度
*/
var maxScrollTop = parseInt(scrolltop + $(window.parent).height());
if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
/**
* 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
*/
if (parseInt(i) + this.ImgHeight >= scrolltop && parseInt(i) <= maxScrollTop && this.ArrLoad.hasOwnProperty(i)) {
for (j = 0; j < this.ArrLoad[i].length; j++) {
this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
}
delete this.ArrLoad[i];
}
}
}
},
/**
* 执行函数，调用相关的函数进行图片延迟加载的处理
*/
Run: function () {
var lazyLoadObject = this.Init();
this.Calculate(lazyLoadObject);
arrScrollTop = this.ArrLoad;
if (arrScrollTop == null) {
return false;
}
else {
var _this = this;
_this.IsLoad($(window.parent).scrollTop(), arrScrollTop);
/**
* 触发浏览器滚动条滚动事件
*/
$(window.parent.document).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}
1、引入jquery.lazyload.js文件
2、然后将页面中需要延迟加载的图片进行一定处理，src就不是图片真正的路径，
而是本地的一张默认的初始化图片，真正的图片的路径放在lazyload属性中
3、这样就可以实现图片的延迟加载
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>t</title>
<script type="text/javascript" src="jquery.lazyload.js"></script>
</head>
<body>
<img src="本地图片路径" lazyload="网络上面需要下载的图片路径" height="48px" width="48px"/>
</body>
</html>
二、延迟加载js代码：
/*
图片延迟加载原始版本
图片加载的顺序只能是从上到下，不能是可见区域的图片加载。
如果进行分页时，处于浏览器的底部，就根本没有图片延迟加载的效果，图片全部被加载完了
*/
var lazyLoad = {
Init: function () {
return $("img[lazyload]");
},
Calculate: function (lazyloadobject) {
var windowHeight = $(window).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
lazyloadobject.each(function (i) {
_scrollTop = parseInt($(this).offset().top - windowHeight);
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
arrReturn[_scrollTop].push($(this));
});
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
IsLoad: function (scrolltop, objectstop) {
if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
if (parseInt(i) <= scrolltop && this.ArrLoad.hasOwnProperty(i)) {
for (j = 0; j < this.ArrLoad[i].length; j++) {
this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
}
delete this.ArrLoad[i];
}
}
}
},
Run: function () {
var lazyLoadObject = this.Init();
this.Calculate(lazyLoadObject);
arrScrollTop = this.ArrLoad;
if (arrScrollTop == null) {
return false;
}
else {
var _this = this;
_this.IsLoad($(window).scrollTop(), arrScrollTop);
$(window).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}
/**
图片延迟加载修改版本01：适用于普通的页面，没有嵌套在iframe中的页面实现图片延迟加载
图片加载的顺序是对可见区域的图片进行加载，滚动条滚到哪部分就进行哪部分图片的加载
*/
var lazyLoad = {
/**
* 初始化函数，获得当前页面中含有lazyload属性的img标签
*/
Init: function () {
return $("img[lazyload]");
},
/**
* 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
*/
Calculate: function (lazyloadobject) {
/**
* 获得浏览器中可见区域的高度
*/
var windowHeight = $(window).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
/**
* 依次循环当前页面中所有的img对象
*/
lazyloadobject.each(function (i) {
/**
* 计算img到浏览器顶部的距离
*/
_scrollTop = parseInt($(this).offset().top);//parseInt($(this).offset().top - windowHeight);
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
/**
* 距离一样就放到同一个数组中
*/
arrReturn[_scrollTop].push($(this));
});
/**
* 获得图片的高度
*/
this.ImgHeight = $(lazyloadobject[0]).attr("height");
/**
* 处理好以后的img对象数组
*/
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
/**
* 图片高度
*/
ImgHeight: null,
/**
* 进行图片的加载
*/
IsLoad: function (scrolltop, objectstop) {
/**
* 浏览器可见区域底部的高度
*/
var maxScrollTop = parseInt(scrolltop + $(window).height());
if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
/**
* 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
*/
if (parseInt(i) >= scrolltop && parseInt(i) <= maxScrollTop && this.ArrLoad.hasOwnProperty(i)) {
for (j = 0; j < this.ArrLoad[i].length; j++) {
this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
}
delete this.ArrLoad[i];
}
}
}
},
/**
* 执行函数，调用相关的函数进行图片延迟加载的处理
*/
Run: function () {
var lazyLoadObject = this.Init();
this.Calculate(lazyLoadObject);
arrScrollTop = this.ArrLoad;
if (arrScrollTop == null) {
return false;
}
else {
var _this = this;
_this.IsLoad($(window).scrollTop(), arrScrollTop);
/**
* 触发浏览器滚动条滚动事件
*/
$(window).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}
/**
图片延迟加载修改版本02：适用于嵌套在iframe中的页面实现图片延迟加载
图片加载的顺序是对可见区域的图片进行加载，滚动条滚到哪部分就进行哪部分图片的加载
*/
var lazyLoad = {
/**
* 初始化函数，获得当前页面中含有lazyload属性的img标签
*/
Init: function () {
return $("img[lazyload]");
},
/**
* 计算函数，计算img到浏览器顶部的距离，如果距离一样就放到同一个数组中
*/
Calculate: function (lazyloadobject) {
/**
* 获得浏览器中可见区域的高度
*/
var windowHeight = $(window.parent).height();
var arrReturn = {};
var _scrollTop;
if (lazyloadobject.length == 0) {
return null;
}
else {
/**
* 依次循环当前页面中所有的img对象
*/
lazyloadobject.each(function (i) {
/**
* 计算img到浏览器顶部的距离
*/
_scrollTop = parseInt($(this).offset().top) + $(window.parent.document).find("iframe[id=zhy_iframe]").offset().top;
if (!arrReturn.hasOwnProperty(_scrollTop)) {
arrReturn[_scrollTop] = new Array();
}
/**
* 距离一样就放到同一个数组中
*/
arrReturn[_scrollTop].push($(this));
});
/**
* 获得图片的高度
*/
this.ImgHeight = $(lazyloadobject[0]).attr("height");
/**
* 处理好以后的img对象数组
*/
this.ArrLoad = arrReturn;
return arrReturn;
}
},
ArrLoad: null,
/**
* 图片高度
*/
ImgHeight: null,
/**
* 进行图片的加载
*/
IsLoad: function (scrolltop, objectstop) {
/**
* 浏览器可见区域底部的高度
*/
var maxScrollTop = parseInt(scrolltop + $(window.parent).height());
if (objectstop != null && objectstop != {}) {
for (i in this.ArrLoad) {
/**
* 如果图片在可见区域类，就进行图片的加载，否则就不进行加载
*/
if (parseInt(i) + this.ImgHeight >= scrolltop && parseInt(i) <= maxScrollTop && this.ArrLoad.hasOwnProperty(i)) {
for (j = 0; j < this.ArrLoad[i].length; j++) {
this.ArrLoad[i][j].attr("src", this.ArrLoad[i][j].attr("lazyload")).removeAttr("lazyload");
}
delete this.ArrLoad[i];
}
}
}
},
/**
* 执行函数，调用相关的函数进行图片延迟加载的处理
*/
Run: function () {
var lazyLoadObject = this.Init();
this.Calculate(lazyLoadObject);
arrScrollTop = this.ArrLoad;
if (arrScrollTop == null) {
return false;
}
else {
var _this = this;
_this.IsLoad($(window.parent).scrollTop(), arrScrollTop);
/**
* 触发浏览器滚动条滚动事件
*/
$(window.parent.document).scroll(function () {
_this.IsLoad($(this).scrollTop(), arrScrollTop);
});
}
}
}
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 
相关文章推荐
- 原生Js页面滚动延迟加载图片实现原理及过程
- JS实现图片的延迟加载
- lazyload.js实现图片延迟加载。
- JS实现图片延迟加载并淡入淡出效果的简单方法
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- jquery插件实现图片延迟加载（lazyload.js）
- JS实现图片延迟加载
- Jquery.LazyLoad.js修正版下载，实现图片延迟加载插件
- JS实现移动端图片延迟加载
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- js实现监听页面滚动实现图片延迟加载
- js实现多张图片延迟加载效果
- js图片延迟加载的实现方法及思路
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- JS实现非首屏图片延迟加载的示例
- js简单实现图片延迟加载的方法
- jquery.lazyload.js实现图片延迟加载——wordpress图片随滚动条渐显效果
- js开发：原生js实现图片延迟加载
- js实现图片的延迟加载