Shulou(Shulou.com)06/02 Report--

This article mainly explains "web front-end picture delay loading example analysis", interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Next let the editor to take you to learn "web front-end picture delay loading example analysis"!

First of all, define the picture 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 point), please take a look at the src in the img tag. At first, we did not give it a specific image resource path, but we defined a property x-src. The value of this attribute is the image resource path, as is the img of each line. Next, when the page loads, we use jquery (of course, you want the javascript native code to also be able to do so. I am only here to save time) to cycle through each img to determine whether each image is in the current visual area, or to display the image, otherwise it will be processed later. Here are three pieces of data to know:

Note: because what I write is that the picture will not be loaded until half of the picture enters the visual area of the browser, so the third data is needed, which depends on the needs of the person. if your need is to load the picture as long as it has entered the visual area, you can directly ignore the third data!

1: height of the visual area of the browser

2: the offset of the picture relative to the document (only the offset in height is needed here)

3: the height of the picture element itself

If the picture first offset the document + half the height of the picture element itself

The specific effects are as follows:

As you can see on the console, although we have five rows of pictures with three columns in each row, only * columns are loaded in the image (the img of the image height is more than half the height of the image will load the resources of the image), and nothing else is loaded, so the refresh of the picture will have a quick effect. Then, the user needs to see more pictures, and then the scroll bar needs to scroll down. To refresh more pictures, then at this time, in addition to the above three data, we also need to know the current scroll bar scroll distance, if:

First, for the offset of the document + half of the height of the image element itself < the height of the visible area of the browser + the distance of the current scroll bar, then it indicates that the current picture is already in the visual area. and more than half of the height of the picture is in the visual area, then load the image as follows:

The specific effects are as follows:

In the console, you can see that as the scroll bar scrolls, the loaded images have changed from the original three to the current six. As the scroll bar continues to scroll down, the pictures will continue to load in and get a better user experience.

At this point, I believe that everyone on the "web front-end picture delay loading example analysis" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.