How to use Javascript to perform image loading from fuzzy to clear display

This article mainly introduces how to use Javascript to perform image loading from fuzzy to clear display. It is easy to understand and can be referenced by anyone who needs it. 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:

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

For more articles about how to use Javascript to load images, see PHP!