Page front-end Optimization-scroll delay loading image example _ jquery

All web developers should master the front-end optimization technique, one of which is rolling delayed loading. This technique has been applied in many places, such as Sina Weibo. The following is a detailed introduction. For more information about latency loading, see why? Why not show all the images when the page is loaded? Is it necessary to do so? The answer is yes. When there are many images or content to be loaded, if one-time loading is completed, the whole page will be loaded for a long time, meaning that the user will wait for a long time, which is unfriendly to the user. Maybe you will ask, isn't it possible to create a page? In fact, this rolling delayed loading technique is used to replace the paging Technique of manually clicking the next page. Each page needs to be clicked once, which is unfriendly to users. So there is a rolling delay loading.

I will take image loading as an example here, just like in Baidu images. If you scroll down, it will continue to display the next page of images.

This is the requirement. For example, if I want to load 20 images, I need to load 5 after the page is loaded (provided that 5 images are already full of the browser window height ), when the scroll bar is scroll to the bottom of the browser, five more will be loaded, and a total of four will be loaded.

The principle is as follows: first obtain the window height a of the current browser, and then bind a scroll bar event to the page. When the scroll bar is rolling, first judge that 20 rows have been loaded, if there are less than 20 images, obtain the height (B) from the top of the current document and the height (c) of the image content. If a + B> = c, load 5 more images.

As I said, I like to present some powerful functions to people in need with as few code as possible and as simple as possible demos, because the principle of everything is actually very simple, the simpler the demo, the easier it is to understand and accept. So there are few codes,Directly run the Code:

The Code is as follows:

Page scroll delay loading Image