1 Several apis related to image lazy loading

clientHeight,clientWidth
element.clientHeight
element.clientWidth
Copy the code

Explanation on MDN

ClientHeight 'can be calculated as: CSS' height '+ CSS' padding '- horizontal scroll bar height (if present) clientWidth' can be calculated as: CSS 'width' + CSS 'padding' - Vertical scroll bar height (if present)Copy the code

Visual diagram

offSetTop
element.offsetTop
Copy the code

Explanation on MDN

It returns the distance of the current element relative to the top inner margin of its offsetParent elementCopy the code
getBoundingClientRect
Element.getBoundingClientRect()
Copy the code

Explanation on MDN

Element. GetBoundingClientRect () method returns the Element size and location relative to the viewport. For a standard box model, the size of the element is equal to the sum of 'width/height' + 'padding' + 'border-width'. If ` box - sizing: Border-box ', the size of the element is equal to 'width/height' if: 'left', 'top', 'right', 'bottom', 'x', 'y', 'width', 'left', 'top', 'right', 'bottom', 'y', 'width', The read-only attributes, in pixels, and 'height' describe the entire left edgeCopy the code

Visual diagram

IntersectionObserver
The IntersectionObserver interface (which is part of the IntersectionObserver API) provides developers with a way to asynchronously monitor the intersectionstate of a target element with its ancestors or viewports. Ancestor elements and viewports are called rootsCopy the code

For details on how to use IntersectionObserver interfaces, please refer to my article

2 pictures lazy loading ideas

For one thing, images are requested only if they are in the viewable areaCopy the code
Methods a

If: offsetTop -scrooltop <clientHeight, the image is in the viewable area and is requestedCopy the code
<! < span style> < span style> img {width: 100%; height: 100%; margin-bottom: 20px; } </style> </head> <body> <div> <img data-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg" alt=""> </div> </body> <script> const Imgs = document. QuerySelectorAll (' img ') / / if the current element offsetParent there are upward cycle until the offsetParent does not exist the function getTop (e) {let T = e.offsetTop while (e = e.offsetParent) { T += e.offsetTop } return T } function lazyLoad(imgs) { const H = Document. The documentElement. ClientHeight / / for viewing area highly const S = document. DocumentElement. The scrollTop | | document. The body. The scrollTop for (let i = 0; i < imgs.length; i++) { if (H + S > getTop(imgs[i])) { imgs[i].src = imgs[i].getAttribute('data-src') } } } window.onload = Onscroll = function () {//onscroll()} </script> </ HTML >Copy the code
Method 2
Element. GetBoundingClientRect (). The top < = clientHeight `, the picture is in the viewing areaCopy the code

The js code is as follows

const imgs = document.querySelectorAll('img'); function isIn(el) { const top = el.getBoundingClientRect().top; const clientHeight = window.innerHeight; return top <= clientHeight; Function check() {array.from (imgs).foreach (function(el){if(isIn(el)){loadImg(el); } }) } function loadImg(el) { if(! el.src){ cosnt source = el.dataset.src; el.src = source; }} window.onload = window.onscroll = function () {//onscroll() trigger check(); }Copy the code
Methods three

IntersectionObserver interface is used

<! < span style> < span style> img {width: 100%; height: 250px; } </style> </head> <body> <img data-src="https://fuss10.elemecdn.com/a/3f/3302e58f9a181d2509f3dc0fa68b0jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/1/34/19aa98b1fcb2781c4fba33d850549jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/0/6f/e35ff375812e6b0020b6b4e8f9583jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/9/bb/e27858e973f5d7d3904835f46abbdjpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/d/e6/c4d93a3805b3ce3f323f7974e6f78jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/3/28/bbf893f792f03a54408b3b7a7ebf0jpeg.jpeg" alt=""> <img data-src="https://fuss10.elemecdn.com/2/11/6535bcfb26e4c79b48ddde44f4b6fjpeg.jpeg" alt=""> </body> <script> let imgList = document.querySelectorAll('img') let observer = new IntersectionObserver(entries => { entries.forEach(entry => { if (entry.isIntersecting) { entry.target.src = entry.target.dataset.src observer.unobserve(entry.target) } }) }) imgList.forEach(img => { observer.observe(img) }) </script> </html>Copy the code