Front end picture Delay loading detailed explanation

Originally intended yesterday afternoon to write an article about the front-end picture delay loading of the detailed technology blog, did not expect the afternoon company project appeared some problems, so has been in the code to debug, today, day after night in the outside run, back already evening, just after eating rice, think hurriedly fill up, So many small partners who do not understand the specific realization of this can also learn early experience.

The user experience of front-end page is very important for a website, we often have the feeling when we visit some websites with larger image volume: The pictures displayed in the viewable area of my computer screen always can't be brushed out in time, which results in the lack of patience for some users. They do not want to wait, simply shut down the site to see other sites, which makes the loss of the user volume of the site, which is often a site is the most reluctant to see the situation, then for such a situation, the developers continue to work hard, quickly thought of the solution, let the visual area of the picture immediately loaded in , and a picture that does not appear in the viewable area and needs to scroll through the scroll bar is displayed after the picture is scrolled into the viewable area, which is much better than loading all of the picture resources in a single shot, resulting in a slower user experience with the image refresh.

So, how does the technology for picture lazy loading work? Here is a detailed introduction:

First, the definition of the image is three columns, a total of 5 lines, the specific code is as follows:

The use of the bootstrap layout technology (of course, this is not the focus), see the IMG tag src, at first we did not give it a specific picture of the resource path, but we have defined a property x-src, the value of the property is a picture of the resource path, each line of IMG is the case, Next, when the page loads, we use jquery (of course, you want JavaScript native code also can, I'm just to save time) to iterate through each IMG, to determine whether each picture is in the current viewable area, is the display picture, or later processing, Here are three data to know:

Note: Because I am writing that the picture is loaded in the viewable area of the browser where half of the picture is entered, the third data is needed, this is what the individual needs are, and if your requirement is that the image is loaded as soon as it has entered the viewable area, the third data can be ignored directly!!!!

1: Height of the viewable area of the browser

2: The offset of the picture relative to the document (this only requires a height offset)

3: Height of the picture element itself

If the picture first for the document offset + half of the height of the picture element itself < The height of the viewable area of the browser, that indicates that the picture has half entered the viewable area, then I should have to load the picture in, but the IMG tag src is empty, x-src value is the image of the resource path , this time will need to use jquery to the IMG tag x-src value to SRC, so that the picture loaded in, the implementation code is as follows:

The specific results are as follows:

You can see in the console, although we have 5 lines of pictures, each row has 3 columns, but loaded in the picture only the first column (the image height has more than half of the IMG will load the image of the resources come in), the others are not loaded, which makes the image refresh will quickly appear, then, then, Users need to see more pictures, this time need to scroll down, to refresh more pictures, then this time we in addition to the above 3 data, but also need to know the current scroll bar scrolling distance, if:

Picture first for the offset of the document + the height of the picture element itself < The height of the browser viewable area + the current scroll bar scrolling distance, so that the current picture is already in the viewable area, and the picture is more than half of the height is within the viewable area, then the picture is loaded in, the specific code is as follows:

The specific results are as follows:

In the console you can see, with the scroll bar scrolling, loaded in the image from the original three into the current six, scroll bar constantly scrolling down, the picture will continue to load in, so that a better user experience.

This is the picture delay loading the specific implementation, is not to think of the image of the cool, if you want to see the specific implementation of the results, you can click on my URL to view: