<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>多图片页面的延迟加载</title>
<style>
*{
padding:0;
margin:0;
}
img{
width: 300px;
height: 200px;
display: block;
}
</style>
<script src="jquery.js"></script>
</head>
<body>
<img src="images/loading.gif" lazy-src="http://imgsrc.baidu.com/forum/pic/item/359b033b5bb5c9ea0233765ed539b6003bf3b34e.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://img05.tooopen.com/images/20140524/sy_61761371996.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://h.hiphotos.baidu.com/zhidao/pic/item/b90e7bec54e736d1d8f330059a504fc2d46269df.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://pic76.nipic.com/file/20150831/10781037_235052985000_2.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1307/22/c3/23612931_1374475920057.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://pic1.desk.chinaz.com/file/11.12.21/1/shishangzmbz34.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1206/04/c1/11869944_1338790262403.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://www.sucaitianxia.com/Photo/pic/200909/haiys33.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://www.bz55.com/uploads/allimg/101110/1J2343437-7.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://www.sucaitianxia.com/Photo/pic/200909/haiys12.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://e.hiphotos.baidu.com/zhidao/pic/item/314e251f95cad1c843e51c6b7f3e6709c93d5124.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://abc.2008php.com/2011_Website_appreciate/11-07-09/20110709005018.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://img.pconline.com.cn/images/upload/upc/tx/wallpaper/1207/27/c0/12571618_1343368587828.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://imgsrc.baidu.com/forum/pic/item/908fa0ec08fa513d6bc6bd4b3d6d55fbb2fbd933.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://img2.niutuku.com/desk/1208/1939/ntk-1939-20781.jpg" alt="">
<img src="images/loading.gif" lazy-src="http://pic2.desk.chinaz.com/file/201212/4/huibiaobiz80.jpg" alt="">
<script>
//原生JS方法
var test={};
test.getTop=function(imgT){
var top=0;
do{
top+=imgT.offsetTop;
}while((imgT=imgT.offsetParent).nodeName!='BODY'); //获取到body节点为止来取得图片的高度
return top;
};
test.lazy=function(){
var top=document.body.scrollTop||document.documentElement.scrollTop; //获得滚动条下拉的距离
var h=document.documentElement.clientHeight||document.body.clientHeight; //获得可视界面的高度
var imgs=document.getElementsByTagName('img'); //获得所有图片
for(var i=0;i<imgs.length;i++){
var _src=imgs[i].getAttribute('lazy-src');
if(_src!==imgs[i].src){
var _top=test.getTop(imgs[i]);
//console.log(_top+" "+top+" "+h)
if( _top>=top && _top<=top+h){ //在可视区域内的图片加载
imgs[i].src=_src;
}
}
}
}
test.lazy();
window.οnscrοll=function(){
test.lazy();
}
</script>
</body>
</html>
多图片网页实现延迟加载图片
最新推荐文章于 2023-07-01 23:08:49 发布