懒加载作用:
1.提升用户体验,避免出现卡顿现象。
2.有选择的请求图片,减少服务器的压力和流量,减少浏览器的负担。
懒加载的实现过程:
将图片的src属性设置为“,图片的真实路径设置到data-src属性中。页面滚动的时候计算图片的位置与滚动的位置,当图片出现在浏览器视口内时,将图片的src属性设置为data-src属性的值。实现懒加载。
html结构代码:
<ul id="picUl">
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img class="imgLazyLoad" src="" data-src="http://upload-images.jianshu.io/upload_images/5779996-61226782ec1512d4.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://img.taopic.com/uploads/allimg/120727/201995-120HG1030762.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
<li><img src="" data-src="http://d.hiphotos.baidu.com/zhidao/pic/item/b8389b504fc2d562c637d942e01190ef76c66c65.jpg" class="imgLazyLoad"></li>
</ul>
css样式代码:
ul{
width: 1000px;
height: 800px;
overflow: scroll;
border: 1px solid #000;
padding: 0;
}
ul li {
list-style: none;
float: left;
}
.imgLazyLoad{
width: 300px;
height: 300px;
/*float: left;*/
margin: 10px 10px;
}
js代码:
<script type="text/javascript">
var picList=nodeToArray("imgLazyLoad");
var parentElement=document.getElementById('picUl');
function nodeToArray(element) { //将类数组转化为数组
var nodes=document.getElementsByClassName(element);
return Array.prototype.slice.call(nodes);
}
function jugeTop(child,parent) { //判断图片是否在可视区
return child.offsetTop-parent.scrollTop<parent.offsetHeight;
}
function showPic(elementList,parent) { //懒加载图片
for (var i = 0; i < elementList.length; i++) {
if(jugeTop(elementList[i],parent)){
elementList[i].src=elementList[i].getAttribute('data-src');
elementList.splice(i,1);
i--;
}
}
}
showPic(picList,parentElement); //初始化首页的图片
function throttle(){
var curTime=new Date();
return function(){
var timeout;
clearTimeout(timeout);
if (new Date()-curTime>1000) {
curTime=new Date();
showPic(picList,parentElement);
}else{
timeout=setTimeout(function() {
showPic(picList,parentElement);
}, 500);
}
}
}
parentElement.addEventListener('scroll', throttle());
</script>
节流函数:防止高频率的触发,保证了在一定时间间隔内一定会被触发一次。
参考:点击打开链接