js实现图片懒加载
1. 原理
img标签如果没有src属性，浏览器就不回去发送请求下载图片，只有当通过JavaScript设置了src属性后，浏览器才会发送请求下载图片。我们可以通过"data-*"给img自定义一个属性，比如“data-src”，将图片的真实地址保存到自定义属性中，当元素出现在浏览器的可视范围内时，将自定义的data-src属性值赋值给图片的src属性。
2.实现步骤
1、给img标签添加自定义属性data-src，将图片的真实地址保存到data-src属性中，暂不设置src 2、页面加载完成后，判断img是否在用户可视范围内，如果是则将data-src的值赋给src 3、添加滚动事件监听，滚动时判断img是否出现在用户可视范围内，如果是则将data-src的值赋给src
*{margin:0;padding:0;} ul{overflow:hidden;} li{list-style:none;width:50%;height:12rem;border:1px solid #ccc;box-sizing:border-box;-webkit-box-sizing:border-box;float:left;overflow:hidden;position:relative;} li i{width:20px;height:20px;border-radius:20px;position:absolute;border:2px solid #6feb95;z-index:0;left:50%;top:50%;margin-top:-11px;margin-left:-11px;animation:move 1s infinite;-webkit-animation:move 1s infinite;} li i:before{position:absolute;width:5px;height:5px;border-radius:4px;content:'';box-shadow:0 0 10px #666;-webkit-box-shadow:0 0 10px #666;background:#fff;border:1px solid #fff;top:-3px;left:50%;margin-left:-3px;} img{vertical-align:middle;border-width:0;width:100%;position:relative;z-index:1;} @keyframes move{ 0%{ transform:rotateZ(0); } 100%{ transform:rotateZ(360deg); } } @-webkit-keyframes move{ 0%{ -webkit-transform:rotateZ(0); } 100%{ -webkit-transform:rotateZ(360deg); } }复制代码 /* 获取节点 */ var oUl = document.getElementsByTagName('ul')[0];var aLi = oUl.getElementsByTagName('li');/* 创建img标签函数 */ function createImg(obj){ var src = ''; if(obj.dataset.src){ src = obj.dataset.src; }else{ src = obj.getAttribute('data-src'); } if(obj.children.length <= 1){ var img = document.createElement('img'); img.src = src; obj.appendChild(img); }}/* 计算节点到文档顶部的距离 */ function getTop(obj){ var h = 0; while(obj){ h += obj.offsetTop; obj = obj.offsetParent; } return h;} /* 滚动实时计算所到区域并进行相关计算 */window.onscroll = function(){ var t = document.documentElement.clientHeight + (document.body.scrollTop || document.documentElement.scrollTop); for(var i=0;i