多图片网页实现延迟加载图片

最新推荐文章于 2023-06-19 00:01:25 发布

水中残月

最新推荐文章于 2023-06-19 00:01:25 发布

阅读量3.7k

点赞数 3

分类专栏： HTML5

本文链接：https://blog.csdn.net/sonnylight/article/details/52162348

版权

HTML5 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

<!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>

水中残月

关注

3
点赞
踩
4

收藏

觉得还不错? 一键收藏
2
评论
多图片网页实现延迟加载图片

多图片页面的延迟加载 *{ padding:0; margin:0; } img{ width: 300px; height: 200px; display: block; } //原生JS方法 var test={};
复制链接

扫一扫

专栏目录