标签：src 元素 cur 可视 JavaScript 原理 加载 图片
一、什么是图片懒加载
图片作为一种重要的网页元素，既可以美化网页，又起到了直观、形象的展示网站的信息重要作用，所以图片在网站中的使用是非常普遍和必要的，有些网站甚至需要大量使用图片，如商城。但网站大量使用图片，却也带来了麻烦。因为图片体积一般比较大，一个网站如果使用大量图片，一次性将整个页面的所有图片加载完，势必会大大增加页面加载时间，降低了用户体验，也增加了服务器负担。
所以，对于图片过多的页面，为了提高页面加载速度，提高用户体验，对于页面未出现在可视区域内的图片先不做加载， 直到用户将页面滚动到可视区域后再去加载。这就是图片懒加载，或者称之为图片延时加载、惰性加载。
二、图片懒加载的实现方式
【1】延时加载，使用setTimeout或setInterval进行加载延迟，如果用户在加载前就离开，自然就不会进行加载。
【2】条件加载，符合某些条件或者触发了某些条件才开始异步加载。
【3】可视区域加载，仅仅加载用户可以看到的区域，这个主要监控滚动条来实现，一般距离用户看到的底边很近的时候开始加载，这样能保证用户下拉时图片正好接上，不会有太长时间的停顿。
【4】使用插件如jQuery的lazyload.js插件来实现该功能。
三、JQuery实现
实现思路：先把img的src指向一个小图片，图片真实的地址存储在img一个自定义的属性里,<img src="lazy-load.png" data-src="xxx" />,等到此图片出现在视野范围内了，获取img元素，把data-src里的值赋给src。
【1】获取窗口、窗口滚动和元素距离窗口顶部的偏移高度，计算元素是否出现在窗口可视范围内
function isShow($el){
var winH = $(window).height(),//获取窗口高度
scrollH = $(window).scrollTop(),//获取窗口滚动高度
top = $el.offset().top;//获取元素距离窗口顶部偏移高度
if(top < scrollH + winH){ return true;//在可视范围
}else{
return false;//不在可视范围
}
}
【2】监听窗口滚动事件，检查元素是否在可视范围内
$(window).on('scroll', function(){//监听滚动事件
checkShow();
})
checkShow();
function checkShow(){//检查元素是否在可视范围内
$('img').each(function(){//遍历每一个元素
var $cur = $(this);
if(!!isloaded($cur)){return;}//判断是否已加载
if (isShow($cur)) {
showImg($cur);
};
});
}
【3】元素显示的时候把之前的默认照片替换成data-src里的照片
function showImg($el){
$el.attr('src', $el.attr('data-src'));
$cur.data('isloaded',true);
}
【4】HTML代码结构片段
<body>
<ul class=”container” style=”overflow:hidden”>
<li>
<img src=”images/placehoder.png” height=”200” width=”300” data-src=”images/myImg1.png” />
</li>
<li>
<img src=”images/placehoder.png” height=”200” width=”300” data-src=”images/myImg2.png” />
</li>
<li>
<img src=”images/placehoder.png” height=”200” width=”300” data-src=”images/myImg3.png” />
</li>
..........
</ul>
</body>
标签：src,元素,cur,可视,JavaScript,原理,加载,图片 来源： https://blog.51cto.com/u_15128443/2739564
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。