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