Detailed explanation of the implementation principle of lazy loading of images in js

Advantages of lazy loading of images:

Enhance user experience;

Optimize code;

Reduce http requests;

Reduce server-side pressure;

On-demand loading of the server;

Picture lazy loading principle:

First set the src of the image to the same image or not set it, and set a special attribute for the img tag, for example: data-src is used to store the real preview address of the image; if the image does not enter the visible area , display the same picture or not display the picture directly, no http request will occur at this time. When the picture enters the visible area, the value on data-src is assigned to src, and then the http request is sent.

Key: Determine whether the image enters the visible area (key function)

Visible area width of the page: document.body.clientWidth;

Web page Visible area height: document.body.clientHeight;

Visible area width of web page: document.body.offsetWidth (including the width of the edge); Including the width of the edge);

The full text width of the web page body: document.body.scrollWidth;

The full text height of the web page body: document.body.scrollHeight;

The web page is scrolled The height of the page: document.body.scrollTop;

The left side of the web page being scrolled: document.body.scrollLeft; Text part left: window.screenLeft;

The height of the screen resolution: window.screen.height;

The width of the screen resolution: window.screen.width;

Screen available work area height: window.screen.availHeight;

The distance of the current element relative to the top of its offsetParent element: HTMLElement.offsetTop;

The viewport height of the browser window (In pixels): window.innerHeight; (If there is a horizontal scroll bar, also includes the scroll bar height)

(Recommended tutorial:

js tutorial

)

Code implementation:

html part

<div>
  <img src="./img/1.jpg" data-src="./img/1.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/2.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/3.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/4.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/5.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/6.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/7.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/8.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/9.jpg" alt="">
  <img src="./img/1.jpg" data-src="./img/10.jpg" alt="">
 </div>

js part

window.onload = () => {
   // 获取某节点与浏览器顶部的距离
   function getTop(e) {
    if (!e) return
    return e.offsetTop
   }
   let imgs = document.getElementsByTagName('img')
   function lazyLoading(imgs) {
    // 可是区域高度
    let innerHeight = window.innerHeight;
    // 滚动区域高度
    let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    for (let i = 0; i < imgs.length; i++) {
     // 图片距离顶部的距离大于可视区域和滚动区域之和时加载
     if (scrollTop + innerHeight > getTop(imgs[i])) {
      imgs[i].src = imgs[i].getAttribute(&#39;data-src&#39;)
     }
    }
   }
   lazyLoading(imgs)
   window.onscroll = () => {
    lazyLoading(imgs)
   }
  }

The above is the detailed content of Detailed explanation of the implementation principle of lazy loading of images in js. For more information, please follow other related articles on the PHP Chinese website!