1. Element.getBoundingClientRect() Method returns the size of the element and its position relative to the viewport. If it’s a standard box model, the dimensions of the elements are equal towidth/height + padding + border-widthCombined. ifbox-sizing: border-boxThe size of the element is equal towidth/height.
  2. The implementation idea is very simple, is the HTML inside the IMG tag SRC attribute first do not write such as address, address inside other attributes. When the image enters the viewport, write the image’s address to the SRC property
  3. The code also adds a throttling function to prevent multiple operations
` ` ` <! DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> div,img{ height: 300px; } </style> </head> <body> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOd KgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? = 1629826287 & t = cc4 the SEC 51541ab91ab763d9d0b8afc97b756"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2F Pic%2Fitem%2F4034970a304e251fae75ad03a786c9177e3e534e.jpg&refer=http%3A%2F%2Fgss0.baidu.com & app = 2002 & size = f9999, & q = 10000 a80&n=0&g=0n&fmt=jpeg?sec=1629826346&t=77b192214904fca03a02dc4af5d4b2ab"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F3818889%2Ff%2F1195841456.jpg&refer=h Ttp%3A%2F%2Fphoto.tuchong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? = 1629826346 & t = a5f2564045d6d49b98b549b the SEC 24ff52ed7"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fblog%2F201306%2F25%2F2013062 5150506 _fij2r.jpeg&refer=http%3a%2f%2fcdn.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1629826346 & t =29748ef4baa6a5e1af30ca543b49904e"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphoto blog%2F1210%2F26%2Fc2%2F14676275_14676275_1351218242935_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size= F9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1629826346 & t = c5d6040cbdae338d0ad3298bc47e097e "> < / div > < div > < img SRC =" "Alt =" " data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2F2c.zol-img.com.cn%2Fproduct%2F124_500x2000%2F748%2FceZOd KgDAFsq2.jpg&refer=http%3A%2F%2F2c.zol-img.com.cn&app=2002&size=f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? = 1629826287 & t = cc4 the SEC 51541ab91ab763d9d0b8afc97b756"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fgss0.baidu.com%2F-Po3dSag_xI4khGko9WTAnF6hhy%2Fzhidao%2F Pic%2Fitem%2F4034970a304e251fae75ad03a786c9177e3e534e.jpg&refer=http%3A%2F%2Fgss0.baidu.com & app = 2002 & size = f9999, & q = 10000 a80&n=0&g=0n&fmt=jpeg?sec=1629826346&t=77b192214904fca03a02dc4af5d4b2ab"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fphoto.tuchong.com%2F3818889%2Ff%2F1195841456.jpg&refer=h Ttp%3A%2F%2Fphoto.tuchong.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? = 1629826346 & t = a5f2564045d6d49b98b549b the SEC 24ff52ed7"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fcdn.duitang.com%2Fuploads%2Fblog%2F201306%2F25%2F2013062 5150506 _fij2r.jpeg&refer=http%3a%2f%2fcdn.duitang.com & app = 2002 & size = f9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1629826346 & t =29748ef4baa6a5e1af30ca543b49904e"> </div> <div> <img src="" alt="" data-img="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fphoto blog%2F1210%2F26%2Fc2%2F14676275_14676275_1351218242935_mthumb.jpg&refer=http%3A%2F%2Fimg.pconline.com.cn&app=2002&size= F9999, 10000 & q = a80 & n = 0 & g = 0 n & FMT = jpeg? The SEC = 1629826346 & t = c5d6040cbdae338d0ad3298bc47e097e "> < / div > < script > let imgList = [... document. QuerySelectorAll (' img)] the let length = imgList. Length / / throttle function function throttle (fn, wait){ let timer = null return function () { if(! timer){ fn.call(this) } timer = setTimeout(() => { timer = null }, Wait)}} // const imgLazyLoad = (function () {const imgLazyLoad = (function () { Let count = 0 return function () {let deleteIndexList = [] imgList. ForEach ((img, img)) index) => { let rect = img.getBoundingClientRect() if (rect.top < window.innerHeight) { img.src = img.getAttribute('data-img') deleteIndexList.push(index) count++ if (count === length) { Document. The removeEventListener (' scroll 'imgLazyLoad)}}}) / / will be loaded picture removed (should not say is loaded, ImgList = imglist. filter((img, index) =>! DeleteIndexList. Includes (index)}}) () / / for the first time since the call is for the sake of processing open when I was in the mouth below the picture display imgLazyLoad () document. The addEventListener (' scroll ',  throttle(imgLazyLoad, 100)) </script> </body> </html> ```Copy the code