Use React to illustrate.

background

In the front-end development, we often have demand in the page display pictures, put aside all kinds of lazy loading plug-ins, component, the whole process of how to diy will image rendering in developers own hands can facilitate our response to possible changes in demand, and learn some knowledge that may be ignored.

scenario

Suppose you have a page that needs to render a set of cards with an image in each card. The back-end interface returns the following array of objects:

The problem

Imagine rendering images from a set of cards without doing any processing. We might do this:

Obviously, it works, but the effect is flawed, and in the case of a poor Internet connection, the user will see the image displayed on the page bit by bit complete, stiff and stuttering.

Let’s break down the problem first: the image rendering is staid and stiff

  1. Render without showing the image directly
  2. Whether Loading state can be displayed when Loading is not completed, and images can be displayed and transition effects can be added after downloading
  3. How can multiple images be rendered independently without affecting each other
  4. Error handling and presentation of image download failure

For the convenience of understanding, we first ignore the failure of image downloading. When to render the Loading state or the image itself depends on whether each image is downloaded successfully or failed. This status field is temporarily set as isDownloadActionDone, which is not the relationship between 1 and N. Instead, each picture corresponds to its own isDownloadActionDone field one by one to avoid influence on other pictures. Therefore, the data returned by the back end should be processed a little first:

Then, we can pre-download each image. Considering React itself merges this state change, we control the download of each image by using recursive serial control, and change the isDownloadActionDone field of the corresponding item in the object array to true. Note that whether the image is downloaded successfully or not, We only care if the Loading action is complete, so we can loop the render card in the render function and use this field to tell when to render the loaded component or the image itself:

At this time, Loading will appear first in the card when the list is rendered, and the image itself will appear after the downloading action of each image. Although it does not feel stuck, the effect is very stiff. We can add some CSS to make the image appear with transition effect.

At present, we have basically completed the requirements. Image resources will be loaded in serial, and images that fail to be downloaded will not block the downloading of other images. Images in the download will be loaded first, and images that will transition after downloading will be loaded.

perfect

  • If the image download fails, it will display the image we set upaltProperty value and has an image missing icon, if we want to display a custom in case the image download failsNo thumbnails are availableWhat to do?

Train of thought

In the handleDownImg method, the content of the two hook functions is the same for the successful and failed download, just need to add a failed download errFlag field for each image processing, if the download failed set to true

The presentation logic in render also needs some work:

Final effect (effect under Fast 3G, easy to see the loading process) :

conclusion

It is better to spend time looking for ready-made components than to settle down and try to achieve them by ourselves.

Author: github.com/fatdoge

Blog link: fatdoge.cn/archives/8….