Lazy loading is when the page needs to display more pictures, first load only show in the current location of the screen image, scroll down the page, then load the other need to display images in the current location of the screen, this will prevent the disposable to the server sends a large number of requests, and can be viewed in the user does not need to complete page cases, reduce server resources consumption

The instance

<! DOCTYPEhtml>
<html>
<head>
  <title>Lazy loading of images</title>
  <style type="text/css">
    .imgUnitContainer {
      height: 300px;						/* Fixed a height */
      width: 500px;							/* Fixed a width */
      overflow: hidden;					/* Images outside the container are hidden */
      border: 1px solid #eee;		Bezel / * * /
      margin: 10px;							/* Outer border */
      display: flex;						/* Elastic layout */
      align-items: center;			/* Vertical center */
      justify-content: center;	/* Horizontal center */
    }
  </style>
</head>

<body>
  <div id="container"></div>/* Image container */</body>

<script type="text/javascript">
  let imgNodeList = [];					// All lazy image references
  (function () {
    let imgUrlArr = [						// All image links to load
      "imgUrl"."imgUrl"."imgUrl"."imgUrl"."imgUrl"."imgUrl"."imgUrl"."imgUrl"."imgUrl",];let innerContainer = document.createElement("div");		// Minimize the DOM operation. All images are first loaded to this node and finally mounted to the image container
    imgUrlArr.forEach(v= > {		// Iterate over the image reference
      let imgUnitContainer = document.createElement("div");		// The outer div of the image, mainly to unify the image size
      imgUnitContainer.className = "imgUnitContainer";				/ / set the class
      let img = new Image();			// new an img node
      img.src = "https://cdn.jsdelivr.net/gh/sentsin/layui@15d7241/dist/css/modules/layer/default/loading-2.gif"													/ / display loading
      img.setAttribute("data-src", v);				// Store actual urls that need to be loaded
      img.setAttribute("loaded"."no");				// Check whether the image is loaded
      imgNodeList.push(img);			// Add node references to the array
      imgUnitContainer.appendChild(img);			// Add img to the outer div
      innerContainer.appendChild(imgUnitContainer);						// Add the outer div to the inner container
    })
    document.getElementById("container").appendChild(innerContainer); }) ();const lazylod = () = > {
    let height = window.innerHeightl					// View area height
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;					// The height of the scroll area
    imgNodeList.forEach(v = > {								/ / traverse
      if (v.getAttribute("loaded") = = ="yes") return;					// If it is already loaded, it will not be loaded again
      if (height + scrollTop) > v.offsetTop {
        v.setAttribute("loaded"."yes");			// Set the load first to avoid duplication
        let tmp = new Image();								// new a cache img node, mainly for implicit loading
        tmp.src = v.getAttribute("data-src");	// Set SRC for the cache node to start loading
        tmp.onload = () = > {									// the cache img load is complete
          v.src = v.getAttribute("data-src");	// Cache the image node shown in the document after the img load is complete. The browser will read the cache directly}}})}window.sroll = () = > {
    lazyload();
  }
  window.onload = () = > {
    lazyload();
  } 
</script>
</html>
Copy the code