1. Background introduction
In the online photo album application, users’ simplest need to view photos. When the network is slower, the waiting time for viewing photos is relatively long, and the user experience will be very poor.
2. Current situation
There are two main ways to load photos:
(1) The most original way to directly load and display photos on the html page with the img tag. This method will have a blank waiting process when the network speed is slow or the photos to be displayed are relatively large, and the user experience will be poor.
(2) First use the img tag to load the thumbnail of the photo to display the photo on the html page, and then use javascript to load the original image of the photo hidden, and wait until the large image of the photo is loaded before displaying the original image to the page. The following is the flowchart:
3. Our Solution
Some of the optimization methods recently made by QQ Photo Album have solved the shortcomings of the two methods of appeal and met the users' needs to view photos: see the general situation of the photos as soon as possible and see the clear original image as quickly as possible. This method uses thumbnails and original images to load and overlay display simultaneously. First, load the thumbnails and expand the display, and the large image is superimposed on the thumbnails and loads simultaneously. The thumbnail is very small and usually allows users to quickly see the blurred image. During the loading of the large image, the thumbnail is gradually covered from top to bottom, so that the user can see the large image during the loading process.
(1) Example diagram
As shown above, the processing steps of this method are:
1). Get the URL of the photo thumbnail and original image, and get the length and width of the photo;
2). Load and display the photo thumbnails, and stretch the thumbnails according to the length and width of the film. At this time, the user sees a blurred effect;
3). Load and display the original photo, superimpose the original image on the thumbnail to display it. The original image will be displayed as much as it loads. If it is not loaded, it will still display the thumbnail. Gradually overwrite the thumbnail. During the loading process of the original image, the user sees the gradient effect of the photo from blur to clear.
4). After the original image is loaded, the original image has all overwritten the thumbnails, and the user sees the real original image. At this time, you can hide the thumbnails to prevent the thumbnails from interfering with the display of images with transparent effects such as PNG or GIF.
(2) Sample code
<!--Set the size of the photo --><div> <!--Small picture is displayed in large size --> <img src="small_url"/> <!--The original picture is superimposed on the small picture --> <img src="big_url"/></div>
The above is the entire content of this article. For more information about JavaScript, you can check out: "JavaScript Reference Tutorial" and "JavaScript Code Style Guide". I also hope that everyone will support Wulin.com more.