Javascript: The method for loading images from blur to clear display, javascript Loading

Javascript: The method for loading images from blur to clear display, javascript Loading

1. Background

In the online album application, viewing photos is the simplest requirement. When the network is slow, the waiting time for viewing photos is long and the user experience is poor.

2. Status quo

There are two ways to attach a photo:
(1) The original method is to directly use the img tag to load and Display photos on the html page. When the network speed is relatively slow or the number of photos to be displayed is relatively large, a blank wait process will appear on the page, and you cannot start to see the approximate picture information for the user. The user experience is poor.
(2) On the html page, first use the img tag to load the thumbnail of the displayed photo, and use javascript to hide the original image. After the large image is loaded, the original image is displayed on the page. The following is a flowchart:

3. Our Solutions

QQ album has recently made some optimization methods to solve the shortcomings of the two methods of appeal and meet the needs of users to view photos: the first time to see the approximate picture situation and to see the clear source picture as soon as possible. This method loads and overlays the thumbnail and the source image at the same time. First, the thumbnail is loaded and scaled up. The large image is superimposed on the thumbnail and loaded simultaneously. The thumbnail is very small. You can see the blur effect of the photo quickly. The thumbnail is gradually overwritten from top to bottom during the large image loading process, so that you can see the large image during the loading process.

(1) Example

As shown in the preceding figure, the processing steps of this method are as follows:
1) obtain the thumbnail and the URL of the source image, and obtain the length and width of the image;
2) load and display the thumbnail of the photo, and display the thumbnail according to the length and width of the photo. In this case, the user will see the blur effect;
3 ). load and display the original image of the image. The original image is displayed on the thumbnail. If the original image is loaded, the thumbnail is displayed. If the original image is not loaded, the thumbnail is overwritten, during the image loading process, you can see the gradient effect from blur to clear.
4). After the source image is loaded, all the original images will be overwritten by thumbnails. In this case, you will see the real source image. In this case, you can hide the thumbnail to prevent the thumbnail from interfering with the display of images with transparent effects such as PNG or GIF.

(2) Sample Code

<! -- Set the Photo size --> <div style = "width: 400px; height: 300px;"> <! -- Expand the thumbnail display -->  <! -- The Source image is superimposed on the small image -->  </div>

The above is all about the content of this article. For more information about the JavaScript syntax, see: JavaScript reference tutorial and JavaScript code style guide. I also hope you can provide more support.