html
<div class="container"><ul><li><div id="first" class="pic"><img src="" ?trueimg="./img/HBuilder.png" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000001</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000002</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000003</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000004</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000005</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000006</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000007</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000008</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000009</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000010</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000011</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000012</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000013</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000014</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000015</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000016</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000017</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000018</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000019</div></li><li><div class="pic"><img src="" ?trueimg="./img/timg.jpg" /></div><div class="txt">0000000000000000000000000000000000000000000000000000000000000000000020</div></li></ul></div>
css
???????????* { ???????????????margin: 0; ???????????????padding: 0; ???????????????box-sizing: border-box; ???????????} ???????????????????????li { ???????????????margin-top: 10px; ???????????????border-bottom: 1px solid #000; ???????????????list-style: none; ???????????????height: 100px; ???????????} ???????????????????????.pic { ???????????????width: 200px; ???????????????padding: 10px; ???????????????height: 100px; ???????????????float: left; ???????????????background: url(img/timg.gif) no-repeat center center; ???????????????background-size: cover; ???????????????background-origin: content-box; ???????????} ???????????????????????.pic img { ???????????????opacity: 0; ???????????????display: none; ???????????????border: 1px solid #000; ???????????????width: 100%; ???????????????height: 100%; ???????????} ???????????????????????li:last-child { ???????????????margin-bottom: 10px; ???????????} ???????????????????????.txt { ???????????????height: 100px; ???????????????line-height: 100px; ???????????????overflow: hidden; ???????????}js
var imgList = document.querySelectorAll("img"); ???????????var len = imgList.length; ???????????function loadImg(curImg) { ???????????????var truesrc = curImg.getAttribute("trueimg"); ???????????????var oImg = new Image(); ???????????????var curPar = curImg.parentNode; ???????????????oImg.src = truesrc; ???????????????oImg.onload = function() { ???????????????????curImg.src = this.src; ???????????????????curImg.style.display = "block"; ???????????????????curPar.style.background = "none"; ???????????????????fadeIn(curImg); ???????????????????oImg = null; ???????????????} ???????????????curImg.isLoaded = true; ???????????} ???????????function fadeIn(curImg) { ???????????????var tar = 1; ???????????????var interval = 10; ???????????????var duration = 500; ???????????????var step = (tar / duration) * interval; ???????????????var curOp = parseFloat(getComputedStyle(curImg, null)["opacity"]); ???????????????var timer = window.setInterval(function() { ???????????????????if(curOp > 1) { ???????????????????????curImg.style.opacity = 1; ???????????????????????window.clearInterval(timer); ???????????????????} ???????????????????curOp += step; ???????????????????curImg.style.opacity = curOp; ???????????????}, interval); ???????????} ???????????function handleImg() { ???????????????for(var i = 0; i < len; i++) { ???????????????????var curImg = imgList[i]; ???????????????????if(curImg.isLoaded) { ???????????????????????continue; ???????????????????} ???????????????????var curPar = curImg.parentNode; ???????????????????var a = curPar.clientHeight + curPar.offsetTop; ???????????????????var b = document.documentElement.clientHeight + document.documentElement.scrollTop; ???????????????????if(a < b) { ???????????????????????loadImg(curImg); ???????????????????} ???????????????} ???????????} ???????????setTimeout(handleImg, 1000); ???????????window.onscroll = handleImg;设置定时器延迟加载图片，优化网站打开时间，当图片出现在可见范围就加载图片，否则就不加载。
web性能优化之js图片懒加载
原文地址：http://www.cnblogs.com/zt123123/p/7711381.html