[Web Front-end optimization: blurred pictures] How to Display photos in my QQ space

Preface

This article is estimated not to be too long, and there is a risk of removing the home page, but the old man () will not be afraid of dropping. So I'm here!

Digress:

Transparent

Animation not supported

This image is very easy to lose

Supports step-by-step display (ie is not supported, and ie will display the entire picture after it is completely reached)

Jepg is especially suitable for photography pictures and digital albums on the web.

PNG

Supports various transparency, but filter processing is required for bugs in IE6.

Animation not supported

No operation will consume its quality

Incremental enhancement at intervals is supported, but the image size will increase:

Like PSD in PS, it contains layers and channel information

The above is some information about the image. We will probably understand it, where I will talk about the PNG, especially the staggered png.

Image Display

We know that the img tag will not be loaded when the dom is loaded. Instead, the img Tag starts to load only when the dom structure is complete and a rendering tree is formed (the layout ends.

The order of loading is from top to bottom, which means that we can see the image first and then the image below, but obviously this is not a good display method, if we can see fuzzy images at the beginning and then gradually become clearer, isn't it much better?

It must be a lot better...

So we discussed how to implement it, but we talked about the staggered PNG. Although I believed it at the time, because I didn't know much about it, I thought it was a bit wrong!

Users' questions

Now let's imagine the practice of QQ space (). As a user, I uploaded images.

① I want to use my QQ space as a place for cloud storage and upload my 2 m graduation photo

② The Space generates a thumbnail and a large image as needed.

③ First, we can see the thumbnail, and then the big image. When we click the source image, we can see my first 2 MB photo.

The above is the logic I thought. If QQ space is not the logic, we will not pay attention to it, because from the perspective of users, I must want to keep my original things.

Now, how does the QQ space work ??? That is too complicated and we will not pay attention to it. Here I will explain how I did it.

Blur to clear images

This is generally the case in our photo album:

The thumbnail is shown above and the big image is shown below. Here we can actually make a fuss about the thumbnail !!!

Can we use a thumbnail to "replace" the big image before it is displayed? Let's look at our logic:

① The thumbnail is first loaded at the top of the album, even below, because the thumbnail size is very small and can be quickly loaded.

② Initially place the thumbnail in the big image display position and set its size to the big image size (this size can be obtained in multiple ways, such as computing ends when uploading)

② Place the big picture layout before the thumbnail, because the thumbnail has been displayed, but it seems a bit fuzzy because it is too large, but the big picture is slowly loaded from top to bottom to become clear, giving a blur to clear the illusion

④ Process ended

So let's take a look at our QQ space. We used speed limiting tools to speed up Firefox:

PS: The opening space is very slow after the speed limit...

How are you doing? It's slow enough!

Pay attention to the changes from top to bottom, and I found evidence here.

PS: Why am I still slow when I open the limit on the Internet? It seems that this is why I am slow...

Please refer to the three parts circled in red box here:

The first is the album display container, which is located by relative

The second is the small thumbnail on the top, which is very small:

Let's see, here we are talking so much about people .....

The third frame is the main character:

Conclusion

From the perspective of its entire layout, we thought it was the same. He did a lot of work like this, for example, the image navigation above:

We can see that the thumbnail shown above has long been displayed. When you click the next one, the thumbnail will be displayed without any blank fault. Then, the large image is slowly displayed so that users are willing to stop there.

Conclusion

Well, today we have studied a face-to-face question, and later we have studied the solution from fuzzy to clear pictures ,!

Well, if you have good front-end questions, please leave them here. I 've been working on this kind recently, and I will be able to help you in the future. Let's leave a old man's yuzhao!