The user experience of the front-end page is very important for a website. When we visit some websites with a large amount of pictures, we often have this feeling: the pictures displayed in the visible area of my computer screen are always not timely. This has caused some impatient users to be unwilling to wait any longer, and simply closed the website to see other websites, which led to the loss of users of this website, which often It is the most unwilling situation for a website, so for such a situation, developers continue to work hard, and soon come up with a solution, so that the pictures in the visible area can be loaded immediately, and the pictures that are not in the visible area can be loaded immediately. The view area and the pictures that need to be scrolled and displayed through the scroll bar are scrolled to the viewable area and then displayed, which is much better than loading all the picture resources at one time, resulting in a slower picture refresh user experience. .
So, how to implement the technology of image lazy loading? The following is a detailed introduction:
First, define the picture as three columns, a total of 5 lines, the specific code is as follows:
The layout technology of bootstrap used in it (of course, this is not the point), please see the src in the img tag, at the beginning We did not give it a specific image resource path, but defined an attribute x-src. The value of this attribute is the resource path of the image image, and the img of each line is the same. Next, when the page loads At this time, we use jquery (of course, you can also use javascript native code, I am just here to save time) to loop through each img to determine whether each image is in the current visible area, and if so, display the image, otherwise For later processing, there are three pieces of data that need to be known here:
Note: Because what I wrote is to load the picture when half of the picture enters the visible area of the browser, so the third data is required, which depends on personal needs, if your needs are pictures Load as long as it has entered the visible area, you can directly ignore the third data!!!!
1: The height of the browser's visible area
2: The offset of the image relative to the document (only the offset in height is required here) )
3: The height of the image element itself
If the offset of the image to the document + half of the height of the image element itself < the height of the browser's visible area, it means that the image has already entered half of the visible area, then I will This image should be loaded, but the src of the img tag is empty, and the value of x-src is the resource path of the image. At this time, you need to use jquery to pass the x-src value of the img tag to src, To load the picture in, the specific implementation code is as follows:
The specific effect is as follows:
You can see in the console that although we have 5 rows of pictures and each row has 3 columns, the loaded picture is only the first column (the picture height has More than half of the img will load the resource of the image), and the rest are not loaded, which makes the refresh of the image take effect very quickly, then the user needs to see more images, and at this time they need to scroll The bar scrolls down to refresh more pictures, then at this time, in addition to the above 3 data, we also need to know the current scrolling distance of the scroll bar.
Demo DEMO: Infinite scrolling to load data
In the console, you can see that with the scrolling of the scroll bar, the loaded pictures have changed from the original three to the current six. The scroll bar keeps scrolling down, and the pictures will be loaded continuously, so that the better results can be obtained. user experience.