The first kind of

Image distance from top of browser viewport <= browser viewport height + page scrolling distance

const imgs = document.getElementsByTagName('img'); Function lazyLoad(imgs) {console.log(' triggered '); // Viewport height; const clientH = document.documentElement.clientHeight; // The distance of the scroll, the logical judgment here is to do compatibility processing; const clientT = document.documentElement.scrollTop || document.body.scrollTop; for(let i = 0; i < imgs.length; I++) {// if the viewport height + scroll distance > the distance from the image to the top of the browser to load; / /! Imgs [I].src = imgs[I]. SRC = imgs[I]. SRC = imgs[I]. SRC = imgs[I]. if(clientH + clientT > imgs[i].offsetTop && ! Imgs [I].src) {// The data-xx attribute can be retrieved from the DOM element dataset. imgs[i].src = imgs[i].dataset.src; }}}; // Start loading images displayed in the viewport; lazyLoad(imgs); Function throttle(fn, delay) {let timer = null; return () => { if(timer) { return; }; timer = setTimeout(() => { fn(imgs); timer = null; }, delay)}} // Listen to the scroll event, load the following image; window.onscroll = throttle(lazyLoad, 500);Copy the code

The second,

Element. GetBoundingClientRect () method returns the Element size and its position relative to the viewport. We can get its top value, and its top value is the distance from the top left corner of the element to the top of the viewport. When Element. GetBoundingClientRect (). The top < the viewport height trigger loading;

const imgs = document.getElementsByTagName('img'); Function isShow(el) {// view height const clientH = window.innerheight; const bound = el.getBoundingClientRect(); Return bound.top < clientH; return bound.top < clientH; }; Function showImg(el) {if(! el.src) { el.src = el.dataset.src; Function lazyLoad() {console.log(' loaded '); [...imgs].forEach(el => { if(isShow(el)) { showImg(el); }})}; lazyLoad(); // throttle function throttle(fn, delay) {let timer = null; return () => { if(timer) { return; }; timer = setTimeout(() => { fn(imgs); timer = null; }, delay); }}; window.onscroll = throttle(lazyLoad, 500);Copy the code

The third kind of

IntersectionObserver can asynchronously observe the way in which a target element intersects with its ancestor element or top-level document window (viewport). That is, it helps us determine if an element is present in the viewport. There are only two attributes used:

IntersectionObserver. Observe () : make IntersectionObserver to start listening to a target element;

IsIntersecting attribute: it can judge whether the element appears in the viewport;

Implementation idea: According to the two attributes introduced above, we can traverse each IMG element, and then monitor each element. Finally, according to the isIntersecting attribute, we can determine whether the element appears in the viewport and decide whether to load it or not.

document.addEventListener("DOMContentLoaded", () => { if ("IntersectionObserver" in window) { const imgs = document.getElementsByTagName("img"); Const imageObserve = new IntersectionObserver((entries) => {entries.foreach ((entry) => {// Use this property to determine whether the element appears in the viewport if (entry.isintersecting) {// Entry.target can get that dom element const img = entry.target; img.src = img.dataset.src; Imageobserve. unobserve(img); }}); }); [...imgs]. ForEach ((img) => {// enable monitoring each element imageobserve.observe.img; }); } else {alert(" Your browser does not support IntersectionObserver!" ); }});Copy the code

A fourth

  • The img tag natively supports loading, which can be:

    • Eager: Loads images directly regardless of whether they are in viewable
    • Lazy: Postponing the loading of images until they have reached a threshold (depending on the browser’s implementation) from the viewable area
    • Auto: this parameter is determined by the browser

Source: juejin.cn/post/684790…