preface

Pictures of lazy loading has been a big hot questions, but why he can become a giant magnet in both sweet steamed bun, this is about to mention the benefits – performance optimization, the performance optimization is, you know, all of the products is ultimately to serve the customer, and who can make a better customer experience, who can have the last laugh, Performance is one of the most important.

What is picture lazy loading?

Lazy loading highlight a “lazy” word, lazy is delay the meaning of late, so “lazy loading” namely lazy loading, for example, we load a page, the page is very long, long to our browser viewing area to hold, so lazy loading is priority loading the content of the viewing area, the other part enters the viewing area in load.

Why lazy loading of images?

Lazy loading is a way to optimize web page performance, which can greatly improve the user experience. Images, for example, have long been a major contributor to web performance, and now it’s not uncommon for a single image to exceed several megabytes. If you ask for all images every time you come to the page, chances are the user will be gone by the time the images load. So, we need to load lazily, and when we enter the page, only request the image resources of the viewable area.

The principle of

Picture lazy loading, then we want to achieve lazy loading, of course, is to start on the picture!

As you all know, a picture is a pictureTag, and the main source of the image is the SRC attribute. Whether the browser initiates a parent request is determined by whether the SRC attribute is present.

Well, in that case, then we have to get rightThe SRC attribute of the tag is deprecated until it enters the viewable areaThe SRC attribute is assigned to the tag, so the browser won’t send the request.

implementation

1. Let’s start with a few lazy loading apis

  • The viewport height of the browser window, in pixels; If there is a horizontal scrollbar, include the scrollbar height.

var intViewportHeight = window.innerHeight;

  • Element.clientHeight elements without CSS or inline layout boxes have a read-only property of zero; Otherwise, it is the internal height (in pixels) of the element. It includes padding, but does not include borders, margins, and horizontal scroll bars (if present).

Document. The documentElement. ClientHeight / / for viewing area of the screen height

All right, all right, all right, all right, all right, all right, let’s go through the code, let’s go through the code!

Different from ordinary lazy image loading, the following one does two more careful processing:

  • Remove event monitoring after all images are loaded;
  • The loaded image is removed from imgList.
Let imgList = [... document querySelectorAll (' img)] the let length = imgList. Length / / query the image would be assigned to an array const imgLazyLoad = function() { let count = 0 return (function() { let deleteIndexList = [] imgList.forEach((img, index) => { let rect = img.getBoundingClientRect() if (rect.top < window.innerHeight) { img.src = img.dataset.src deleteIndexList.push(index) count++ if (count === length) { document.removeEventListener('scroll', imgLazyLoad) } } }) imgList = imgList.filter((img, index) => ! DeleteIndexList. Includes (index)}) ()} / / best plus stabilization processing document here. The addEventListener (' scroll 'imgLazyLoad)Copy the code

In fact, this code for you big guy, quite simple, but for me this kind of chicken, or a little difficult, so I simply talk about a few points bai, tamp my own learning, so big guys a lot of excuse, thank you very much!

  1. Return (function() {}) this is an implementation of a self-executing function.

And what is a self-executing function?

Self-called functions: that is, functions are called after or before the page loads, without the need for other functions or methods to start them.

  1. Img. GetBoundingClientRect (ahem, I think you have the such things in mind reading long again!!!! Heh heh, I didn’t.

So, what exactly is this thing? We see an img in front of it, so we know it’s related to an image, so let’s explain:

Img. GetBoundingClientRect () images onto the window of the viewport, or to the left of the distance, it has four attributes

  • Top Distance above the picture Distance above the window
  • Bottom Distance from the bottom of the picture to the top of the window
  • Left The distance between the left side of the picture and the left side of the window
  • Right The distance between the right side of the image and the left side of the window

Isn’t that a little vague? So, I’m a good guy, and I’ve carefully stolen a picture for you, and you’ll see what it’s all about.

  1. Document. The removeEventListener (‘ scroll ‘imgLazyLoad), here is the picture all loading is completed, remove event listeners that what is the reason that it do it?

That’s right, anti-shake treatment

In short, by removing listening events to achieve shake – proof processing.

And, about anti – shake, I will say briefly, without too much explanation, my next article will cover. What? Where’s the next article, you ask? Er… I can only tell you, wait a few days!

Anti-shake: To prevent jitter, so as not to mistakenly execute an event many times, affecting performance. For example, typing on the keyboard is a daily anti-shake operation. 4.! deleteIndexList.includes(index)

  • The includes() method is used to determine whether a string contains a specified substring.

    Returns true if a matching string is found, false otherwise.

Note: the includes() method is case sensitive.

  • I think a lot of students are on this! DeleteIndexListincludes (index)
  1. First, deleteIndexList.includes(index) is a method, right? It’s a query to see if the array deleteIndexList contains the specified index if it does, we return true otherwise false.
  2. Then add it to the front! What does it mean? We all know! = = = = = = = = = = The return value of a method is reversed.

Summary: So this line of code is to delete imgLIst loaded images.

conclusion

Good good, also introduced about the rest of the introduction, I believe that in the case of small partners, to solve it is the sprinkling of water, so we end here, small partners come on, come on! Bye bye