Latency loading of front-end images

Latency loading of front-end images

Images displayed in the visible area of the browser cannot be flushed out in time, so that images in the visible area can be immediately loaded in, the image that is not in the visible area and needs to be displayed by scrolling through the scroll bar will be displayed after the image is rolled to the visible area.

I was planning to write a blog about the detailed technology of front-end image delayed loading yesterday afternoon. I did not expect some problems in the company project in the afternoon, so I have been debugging the code. Today I have been running outside all day, and it's already in the evening. After dinner, I just want to fix it, in this way, many friends who do not understand the specific implementation can learn experience early.

The user experience on the front-end page is crucial to a website. When we access a website with a large number of images, we often feel like this: images displayed in the visible area of my computer screen cannot be flushed out in time, which makes it difficult for users who have no patience to wait, simply shut down the website to view other websites, which leads to the loss of the number of users of the website. This is often the least desirable situation for a website. In this case, developers are constantly working hard to quickly come up with a solution that allows images in the visible area to be loaded immediately, in this way, the image that is not in the visible area and needs to be displayed by scrolling through the scroll bar will be displayed after the image is rolled to the visible area, this is much better than loading all the image resources at a time, resulting in slower image refresh.

How can we implement the image delay loading technology? The following is a detailed introduction:

First, define the image as three columns, with a total of five lines. The specific code is as follows:

The bootstrap layout technology used in it (of course, this is not the focus). Please refer to the src In the img label. At the beginning, we didn't give it the resource path of the specific image, instead, you define an x-src attribute. The value of this attribute is the resource path of the image. This is true for each row of img. Next, when the page is loaded, we use jquery (of course, you can use javascript native code, I am only here to save time) to traverse every img cyclically and determine whether each image is in the current visible area, yes, the image is displayed. Otherwise, you need to know three pieces of data for processing later:

Note: What I wrote is that this image is loaded only when half of the image enters the visible area of the browser, so the third data is required. What is my personal requirement, if you want to load images as long as they have entered the visible area, you can directly ignore the third Data !!!!

1: The height of the visible area of the browser

2: The offset between the image and the document (here only the offset at the height is required)

3: height of the Image Element

If the picture first shows the offset of the document + half of the height of the Image Element <the height of the visible area of the browser, that is, half of the picture has entered the visible area, then I should load this image, but the src of the img label is empty, and the value of x-src is the resource path of the image, in this case, you need to use jquery to pass the x-src value of the img tag to src to load the image. The specific implementation code is as follows:

The specific effect is as follows:

You can see on the console that although we have five rows of images, each row has three columns, however, only the first column (img with more than half of the Image Height can load the image resources) is loaded, and none of the others are loaded, this allows the image to be refreshed quickly. Next, you need to see more images. At this time, you need to scroll down the scroll bar to refresh more images, in this case, apart from the above three data items, we also need to know the scroll distance of the current scroll bar. if:

The image first shows the offset of the document + half of the height of the Image Element. <The height of the visible area of the browser + the scroll distance of the current scroll bar, it indicates that the current image is already in the visible area, if more than half of the Image Height is within the visible area, load the image as follows:

The specific effect is as follows:

On the console, you can see that with the scroll of the scroll bar, the loaded images have changed from three to six. As the scroll bar keeps scrolling down, the images will be continuously loaded in, this gives you a better user experience.

This is the specific implementation of delayed image loading. Do you think the image is cool? If you want to see the specific implementation effect, click my website to view it: