图片懒加载

一、什么是懒加载技术？

定义：这张图片很懒，喜欢临时抱佛脚，都到了出现在屏幕视线范围内了才加载。不过懒人有懒福，这样可以在那种有大量图片需要展示的网站上优化性能，减轻浏览器压力，毕竟你要浏览器一次加载一两百张图片也很累

二、为什要使用这个技术？

这样做能防止页面一次性向服务器发送大量请求，导致服务器响应慢，页面卡顿崩溃等。比如一个页面中有很多图片，如淘宝、京东首页等等，如果一上来就发送这么多请求，页面加载就会很漫长，如果js文件都放在了文档的底部，恰巧页面的头部又依赖这个js文件，那就不好办了。更为要命的是：一上来就发送百八十个请求，服务器可能就吃不消了（又不是只有一两个人在访问这个页面）。因此优点就很明显了：不仅可以减轻服务器的压力，而且可以让加载好的页面更快地呈现在用户面前（用户体验好）。

三、怎么实现？

原理： 先将img标签的src链接设为同一张图片（比如空白图片），先把图片地址存储在一个临时属性上，然后将真正的图片地址存储在data-src中，当用浏览器的onscroll事件监听到该图片元素进入可视窗口时，将自定义属性中的地址存储到src属性中，达到懒加载的效果。

判断条件
window.innerHeight 可以获取到这个窗口的高度(不包括工具栏和滚动条)。getBoundingClientRect()方法用来获取页面中某个元素的左、上、右、下分别相对浏览器视窗的位置，返回的是一个矩形对象，包括四个属性，分别是left 、top、right、bottom。分别表示元素各边与页面上边和左边的距离。
基本的判断就是如果该图片距离窗口上方的位置小于窗口的高度（也就是说该图片已经进入了窗口），那么就将该图片的src属性赋为data-src找那个存的图片路径。
然后全局绑定scroll事件，在滚动页面的时候，图片进入到窗口后，500ms之后才会显示出图片。

"en">

    "UTF-8">
    
  


"box">
  

    

      "./图片懒加载/1.jpg" alt="">
    
    

      "./图片懒加载/2.jpg" alt="">
    
    

      "./图片懒加载/3.jpg" alt="">
    
    

      "./图片懒加载/4.jpg" alt="">
    
    

      "./图片懒加载/5.jpg" alt="">
    
    

      "./图片懒加载/6.jpg" alt="">
    
    

      "./图片懒加载/7.jpg" alt="">
    
    

      "./图片懒加载/8.jpg" alt="">
    
    

      "./图片懒加载/9.jpg" alt="">
    
    

      "./图片懒加载/10.jpg" alt="">
    
  

————————————————