首页 > 代码库 > 图片延迟加载源码分析！
图片延迟加载源码分析！
1 <!DOCTYPE html> 2 <html lang="en"> 3 4 <head> 5 <meta charset="UTF-8"> 6 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 7 <meta http-equiv="X-UA-Compatible" content="ie=edge"> 8 <title>图片延迟加载</title> 9 <style type="text/css">10 #box {11 width: 790px;12 height: 340px;13 border: 1px solid red;14 margin: 20px auto;15 background: url("./img/jddongtu.gif")no-repeat center center;16 }17 #lazyImg {18 display: none;19 }20 </style>21 </head>22 23 <body>24 <div id="box">25 <img trueImg="./img/jd02.jpg" id="lazyImg">26 </div>27 <script type="text/javascript">28 var lazyImg = document.getElementById(‘lazyImg‘);29 var timer = window.setTimeout(function () {30 // body31 var oImg = new Image;32 oImg.src = http://www.mamicode.com/lazyImg.getAttribute("trueImg");33 oImg.onload = function () {34 // 图片能正常加载时，就进行图片展示；35 lazyImg.src = http://www.mamicode.com/this.src;36 lazyImg.style.display = "block";37 oImg = null;38 }39 }, 1000)40 </script>41 </body>42 43 </html>
图片延迟加载源码分析！
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。