为了给用户更好的体验，我们在做pc端的时候，会应用到一项懒加载技术。它的原理就是先给图片加一张一样的图，再给图片添加自定义属性路径图片，然后当图片进入可视区的时候展示真正的图片。代码如下；
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 6 <title>Document</title> 7 <style> 8 *{padding:0;margin:0} 9 div img{ 10 width: 400px; 11 height: 400px; 12 border-radius: 10px; 13 box-shadow: 0px 0px 10px black; 14 margin: 10px; 15 } 16 </style> 17 </head> 18 <body> 19 <div id="odiv"> 20 21 </div> 22 <script> 23 24 var odiv=document.getElementById('odiv'); 25 for(var i =0;i<10;i++){ 26 var imgs =document.createElement('img'); 27 odiv.appendChild(imgs); 28 imgs.setAttribute('src','img/1.jpg'); 29 imgs.setAttribute('data-src','img/'+i+'.jpg'); 30 31 } 32 var imgs= document.getElementsByTagName('img'); 33 window.onscroll=function(){ 34 Array.from(imgs).forEach(function(img){ 35 img.dataset.top=img.offsetTop; 36 console.log(img.dataset.top) 37 var n=document.documentElement.scrollTop+document.documentElement.clientHeight; 38 if(img.dataset.top<n){ 39 var tem= new Image(); 40 tem.src=img.dataset.src; 41 tem.onload=function(){ 42 img.src=img.dataset.src; 43 } 44 } 45 }) 46 } 47 48 </script>