Implementación nativa de JS de carga diferida de imágenes

Colección Focus

<div class="box"> 
      <!-- 图片的src路径为空   lazyload="true"    data-original 值为真实的图片地址 -->
       <img src=""  class="img" lazyload="true" data-original="http://pic.58pic.com/58pic/17/18/97/01U58PIC4Xr_1024.jpg">
    </div>

<script type="text/javascript">
    window.onload = function () {
    
    
      //获取当前浏览器的视口高度
      var viewHeight = document.documentElement.clientHeight;
      console.log(viewHeight)
      //鼠标滚动回调
      function lazyload() {
    
    
          var img = document.getElementsByClassName('img'); //获取所有图片集合
          console.log(img)
          //遍历图片集合
          for (let item of img) {
    
    
              //获取图片距视口顶部的距离
              var imgHeight = item.getBoundingClientRect();
              //判断当图片出现在视口160px时把地址放到src中，显示出图片
              if (imgHeight.top < (viewHeight - 360)) {
    
    
                  item.src = item.getAttribute("data-original")
                   console.log(item.src)
              }
          }
      }

      lazyload();    //页面加载时把当前视口中的图片加载进来
      document.addEventListener('scroll', lazyload);
  }
  </script>

data-*Atributos HTML

Utilice atributos de datos * para incrustar datos personalizados.
Todos los navegadores principales admiten
definiciones de atributos de datos * y los
atributos de datos de uso * se utilizan para almacenar datos personalizados privados para páginas o aplicaciones.

Los atributos data- * nos dan la capacidad de incrustar atributos de datos personalizados en todos los elementos HTML.

Los datos almacenados (personalizados) se pueden utilizar en el JavaScript de la página para crear una mejor experiencia de usuario (sin llamadas Ajax o consultas de bases de datos del lado del servidor).

El atributo data- * consta de dos partes:

El nombre del atributo no debe contener letras mayúsculas y debe haber al menos un carácter después del prefijo "datos-". El
valor del atributo puede ser cualquier cadena.
Nota: Los agentes de usuario ignorarán por completo los atributos personalizados con el prefijo "datos-".

getBoundingClientRect Introducción al método

Comprensión: se getBoundingClientRectutiliza para obtener una colección de la posición de un elemento en relación con la ventana. Hay atributos superior, derecho, inferior, izquierdo y otros en la colección.

1. Sintaxis: este método no tiene parámetros.

        rectObject = object.getBoundingClientRect();

2. Tipo de valor devuelto:

rectObject.top: la distancia desde la parte superior del elemento hasta la parte superior de la ventana;

rectObject.right: la distancia desde la derecha del elemento a la izquierda de la ventana;

rectObject.bottom: la distancia desde la parte inferior del elemento hasta la parte superior de la ventana;

rectObject.left: la distancia desde el lado izquierdo del elemento al lado izquierdo de la ventana;