Example tutorial of implementing lazy loading of images based on JS

Lazy loading of images is also a relatively common method of performance optimization. This article mainly introduces examples of lazy loading of images using native JS. The detailed code is compiled here. Friends in need can refer to it

Preface

Lazy loading of images is also a common performance optimization method. Recently, I was using vue to make a news list client. It has also been used. Here is a brief introduction to the implementation principle and part of the code.

Implementation Principle

When loading a page, pictures are always the main source of traffic, and there are many performance methods for pictures, such as base64, Sprite pictures, etc.; lazy loading is also one of them. The main principle is to set the src of the non-first-screen picture to a default value, then monitor the window scrolling, and then give it a real picture address when the picture appears in the window. This can Ensure the loading speed of the first screen and then load images on demand.

Specific code

First, when rendering, the picture refers to the default picture, and then The real address is placed above the data-* attributes.

<image src=&#39;./../assets/default.png&#39; :src=&#39;item.allPics&#39; class=&#39;lazyloadimg&#39;>

Then to monitor scrolling, just use window.onscroll, but one thing to note is that it is similar to window scroll and resize, as well as mousemove For this type of event that triggers frequently, it is best to use throttling or debounce to control the triggering frequency. There are two methods of encapsulation in underscore and lodash, so I won’t introduce them in detail here.

The next step is to determine whether the image appears in the window, mainly based on three heights: 1. How far the current body has scrolled from the top. 2. The height of the window. 3. The distance between the current picture and the top. The specific code is as follows:

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
  var bodyScrollHeight = document.body.scrollTop;// body滚动高度
  var windowHeight = window.innerHeight;// 视窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
  var imgHeight = imgs[i].offsetTop;// 图片距离顶部高度
  if (imgHeight < windowHeight + bodyScrollHeight) {
   imgs[i].src = imgs[i].getAttribute(&#39;src&#39;);
   img[i].className = img[i].className.replace(&#39;lazyloadimg&#39;,&#39;&#39;)
  }
  }
 }

Conclusion

That’s about it. This time I may add the implementation of the anti-shake throttling source code. Finally, two common scrolling judgments will be added:

1. The page scrolls away from the home screen (at this time, the button to return to the top can be displayed): document.body.scrollTop > window. innerHeight

2. The page has scrolled to the bottom (you can adjust the interface to get more content): window.scrollY + window.innerHeight > document.body.offsetHeight

The above is the entire content of this article. I hope it will be helpful to everyone's study. I also hope that everyone will support Script House.

The above is the detailed content of Example tutorial of implementing lazy loading of images based on JS. For more information, please follow other related articles on the PHP Chinese website!