Web front-end optimization scrolling delayed loading image example_jquery

Why delayed loading? Wouldn't it be better to display all the images when the page loads? Is this necessary? The answer is yes. When there are a lot of images or content to be loaded, if they are loaded all at once, the entire page will take a long time to load, which means users have to wait for a long time, which is not user-friendly. You may also ask, why not just make paging? In fact, this scrolling delayed loading technique is exactly the paging technology used to replace manually clicking on the next page. Each page change requires the user to click once, which is also unfriendly to users. That's why there is rolling delayed loading.

I take loading pictures as an example here, just like in Baidu Pictures. As you scroll down, it will continue to display pictures on the next page.

The requirements are as follows. For example, I want to load 20 pictures. After the page is loaded, I will load 5 pictures first (provided that the 5 pictures have filled the height of the browser window). When the scroll bar scrolls to the bottom of the browser, Load 5 more pictures, for a total of 4 loads.

The principle is this, first get the window height a of the current browser, and then bind a scroll bar scroll event to the page. When the scroll bar scrolls, first judge that 20 pictures have been loaded. If it is less than 20 pictures, Then obtain the height b of the current document from the top and the height c of the image content. If a b>=c, continue to load 5 images.

I said that I like to use as little code as possible and as simple as possible demos to show some powerful functions to people in need, because the principles of everything are actually very simple, and the simpler the demo, the easier it is to use People understand and accept it. So there is very little code, directly enter the code:

The jqury framework is used here to make the code less and simpler. It would be best if you can hand-write pure js code to implement this function. After all, it is optimization, and this small function does not require the use of any js framework. . However, I personally prefer the jquery framework. After all, in large projects, handwriting pure js code will seriously slow down the progress of the entire project. With a powerful js framework in front of you, reasonable use can still improve development efficiency, and in a large project In the project, jquery can not only help you realize this small function, but like Ajax, it can help you do it easily. In addition, I just coded the loading of this image here. In fact, it should use Ajax to request a new image and then load it into the page. Because I want to keep it as simple as possible, there is no background logic involved, so I only load this one. picture.

You may notice this code: docTop winHeight >= contentHeight - 10, why do I want -10 here? If it is not -10, the test passes under IE and Firefox, but it does not work under Chrome, because under Chrome, docTop winHeight is always 1 smaller than contentHeight, while in the first two browsers, docTop winHeight is smaller than contentHeight. The contentHeight is 1 larger. This is a browser problem. We can only be compatible with them. The simplest method is not to scroll to the bottom. When scrolling to 10 pixels from the bottom, you can load a new image.

Need source engineering code?