js-day24-懒加载

懒加载技术

• 网页在加载图片的时候，不会一次性全部加载完毕，哪些图片在屏幕的可视区域里面才去加载它
• 作用
  • DOM优化
  • 节省加载性能
• 核心思路
  • 获取屏幕的可视区域的高度
  • 获取的是图片距离浏览器顶部的距离
  • 然后使用屏幕的可视区域的高度和图片距离顶部的距离进行对比

• window.innerHeight获取浏览器的可视区域的高度（这是一个动态变化的值，根据浏览器窗口大小的改变而改变）
• getBoundingClientRect().top获取到的是每一个元素距离浏览器顶部的距离（这是一个动态变化的值，根据滚动条的滚动的距离而改变）

代码：

 function lzyLoad(){
     // 注意点：把获取元素放在滚动事件的里面的是为了每次重新获取元素的，如果被删除类名的，那么这个元素就获取不到，也就是说这个图片已经加载过了
     let lzy_image = document.querySelectorAll('.lzy-image')
     // 注意点：当浏览器的可视区域的高度大于等于每一个元素的距离浏览器顶部的距离的时候，那么说明这个元素已经进入可视区域了
     // 遍历做比较
     for(let i=0; i<lzy_image.length; i++){
         if(window.innerHeight>=lzy_image[i].getBoundingClientRect().top+80){
             lzy_image[i].src = lzy_image[i].dataset.src
             // 注意点：删除类名的作用是为了让它不重复去加载（不断的替换src路径）
             lzy_image[i].classList.remove('lzy-image')
         }   
     }
     // console.log(lzy_image)
 }
 lzyLoad()

 window.addEventListener('scroll', lzyLoad)