实现图片懒加载(lazyload)

对页面加载速度影响最大的就是图片，一张普通的图片可以达到几M的大小，而代码也许就只有几十KB。当页面图片很多时，页面的加载速度缓慢，几S钟内页面没有加载完成，也许会失去很多的用户。

所以，对于图片过多的页面，为了加速页面加载速度，所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载，等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升，也提高了用户体验。

原理

将页面中的img标签src指向一张小图片或者src为空，然后定义 data-src （这个属性可以自定义命名，我才用data-src）属性指向真实的图片。下面是我的实现代码

<imgsrc="default.jpg"data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg"/>

<head>
<metacharset="UTF-8"><title>Document</title>
<style>
 img{ display: block; margin-bottom:50px; width:400px; height:400px; }
</style>
</head>
<body>
	<img src="" data-src="https://img1.360buyimg.com/da/jfs/t4681/172/669886432/126999/bcab98d/58d32a5cNcca32947.jpg" alt="">
	<img src="" data-src="https://img10.360buyimg.com/da/jfs/t4444/10/225613061/217745/e6262498/58cbd4a0Nb99325f3.jpg" alt="">
	<img src="" data-src="https://img13.360buyimg.com/da/jfs/t4711/313/520217907/80249/fe6c6a43/58d0ce61N66cb443a.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
	<img src="" data-src="http://ww4.sinaimg.cn/large/006y8mN6gw1fa5obmqrmvj305k05k3yh.jpg" alt="">
</body>

<!--  jQuery -->
 <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>
<script>
   var n = 0,
   imgNum = $("img").length,
   img = $('img');
   lazyload();
   $(window).scroll(lazyload);
   function lazyload(event) {
       for (var i = n; i < imgNum; i++) {
           if (img.eq(i).offset().top < parseInt($(window).height()) + parseInt($(window).scrollTop())) {
               if (img.eq(i).attr("src") == "") {
                   var src = img.eq(i).attr("data-src");
                   img.eq(i).attr("src",src);
                   n = i + 1;
               }
           }
       }
   }
</script>

　原文来自： http://www.codesec.net/view/503074.html

巴特西

实现图片懒加载(lazyload)

最新文章

热门文章