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

Source: Internet
Author: User
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

Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.