Homepage Optimization-delayed image loading

Introduction:

To improve user experience, the latency loading technology is required for long pages with multiple images. Kissy has a classic discussion about this, interested friends can go here to learn about (http://docs.kissyui.com/kissy/docs/datalazyload/index.html), I will first briefly introduce, and then discuss how to improve and use in the project.

Analysis:

1. Img src Replacement Scheme:

Advantage: it is easy to implement without changing the Dom structure of the page.

Disadvantage: when the number of images is large, the efficiency is not good enough; When SRC is replaced in ie6 and ie7, A Bug exists.

2. textarea latency scheme:

Advantages: High JS efficiency and multipart Loading

Disadvantage: You need to change the Dom structure and set the height and width of the area surrounded by textarea. This is not convenient enough.

3. Implementation of Kissy: supported in both solutions 1 and 2

Figure 1-1 example of delayed Loading

As shown in, when an image is loaded, all the images above the threshold value are loaded.

Advantages: easy to implement

Disadvantage: insufficient support for some user behaviors. For example, the user directly pulls the scroll bar to the bottom of the page.

4. Homepage analysis (lp.taobao.com)

1) The homepage is longer than 4000*1000

2) multipart display: 10 blocks, 1 first screen, 2 scrolling screens, and 7 General floors

3) each part is short and cannot exceed one screen.

5. Homepage latency plan:

1) load images in multiple parts

2) In the scrolling screen, loading is triggered during frame switching.

Implementation:

1) when the page is opened, only the first screen is displayed by default.

2) When the scroll bar is rolled to the current part (some pixels can be appended, which means the image is loaded in advance), load the current part.

3) add additional Optimizations to seven floors. Because the same implementation provides a manager, when the user stays on a certain floor for more than 5 seconds, you can load unloaded floors.

Summary:

There are several methods to optimize the delayed loading of the homepage.

1) We initially used the default src replacement scheme of Kissy. We found that in ie, when users refresh the page, they will locate the last rolling position, which is particularly poor in user experience;

2) I have tried the textarea solution and the UI experience is poor;

3) The kissy solution is improved. Instead of using the threshold value, images are loaded only in the user view area and cannot be controlled in blocks;

4) Finally, the image is loaded in parts, and the floor Initialization is also processed.

The improved kissy solution and the Code for loading chunk latencies, together with unit tests, will be discussed in the following blog.