Shulou(Shulou.com)06/01 Report--

This article mainly introduces the JavaScript practical picture lazy loading optimization methods, which have a certain reference value, interested friends can refer to, I hope you can learn a lot after reading this article, the following let the editor take you to understand it.

1. Method 1

Key points:

1.getBoundingClientRect (). Top > window.innerHeight picture does not appear

2.getBoundingClientRect () top

< window.innerHeight 图片出现了 HTML： ...... 2222222222 2222222222 2222222222 2222222222 2222222222 2222222222 /*先用data-自定义标签，使图片先不加载*/

_ JavaScript:

Let img = document.querySelectorAll ('img') window.addEventListener (' scroll', () = > {img.forEach ((item) = > {/ / if the top height of the picture is less than the window height if (item.getBoundingClientRect (). Top)

< window.innerHeight) { const data_src = item.getAttribute('data-src') //则将自定义属性data-src赋值给src属性 item.setAttribute("src",data_src) } }) console.log("scroll触发了"); //此方法：若加载很多内容，就会导致任务的堆积，影响整体效率})

We can see that although lazy loading of pictures has been successful, scroll events continue to be triggered, which consumes a lot of resources, so the most recommended method is still IntersectionObserver.

Method 2 InterSectionObserver

Key points:

1.observer.observe (DOM node) which DOM node to observe

2.observer.unobserve (DOM node) cancels observing a DOM node

The 3.callback target is visible and triggered once; the target element is invisible and triggered again

HTML as above

_ JavaScript:

Let img = document.querySelectorAll ('img') / / this callback: the target can see the trigger once Once the target element is invisible, const callback = (entries) = > {/ / receives an array as a parameter. Each item of the array is related to the target element, such as isIntersecting to determine whether the target element has been observed. For example, the target attribute represents the target element entries.forEach ((item) = > {/ / if the target element is observed if (item.isIntersecting) {const img = item.target / / target element const data_src = img.getAttribute ('data-src') img.setAttribute (' src') Data_src) observer.unobserve (img) / / observer.unobserve (DOM node) cancel observing a DOM node} console.log ('trigger') })} const observer = new IntersectionObserver (callback) / / traverses all img so that all img are observed img.forEach ((item) = > {observer.observe (item) / / observer.observe (DOM node) which DOM node is observed})

Train of thought:

New an instance and observe each image by looking at the observe property on the instance. Define the callback callback function to change the properties of the target image when it appears.

At this point, we can see that when all the pictures are lazily loaded (observe cancels observing the DOM node), the scroll event is no longer triggered *

Thank you for reading this article carefully. I hope the article "what are the JavaScript practical picture lazy loading optimization methods" shared by the editor will be helpful to you. At the same time, I also hope you will support us and pay attention to the industry information channel. More related knowledge is waiting for you to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.