Shulou(Shulou.com)06/02 Report--

This article mainly explains "css how to use Gaussian blur effect to load pictures step by step". Interested friends may wish to take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how css uses the effect of Gaussian blur to load pictures step by step.

Users who have used Medium will not forget how its images are loaded-solid color-Gaussian blur-and loaded and displayed.

This is an elegant way to preload images (because Medium images are of high quality, it would take unimaginable time to load them all at once, so it's a great idea). I've been fascinated by this technology ever since I opened the Medium website-well, I didn't study it until today.

On the Medium website, open any article, and then let's inspect:

As you can see, Medium sets such a long HTML for each picture. The purpose of this is to make the step-by-step loading process of the image smooth and improve the user experience to some extent. Even if the picture is not loaded, what is displayed to the user is a Gaussian blurred picture, in fact, it does not lose the sense of beauty.

So, what exactly is the step-by-step loading process of this image?

Render a div container that is used to display the image that is finally displayed to the user. By setting a percentage of padding-bottom on the container to make its scale and size the same as that of the final picture, you can avoid page rearrangement when the image is loaded.

Use the img tag to load a picture with a quality of about 10% to 20% of the original image. The quality of this picture is very low and small, so it can be loaded immediately.

Once the small image is loaded, start to use canvas to draw, add blur effect, and start to request the large image to be loaded eventually

When the final big image is also loaded, show the big image and hide the canvas.

This is what Medium does.

We can achieve this effect ourselves, and the process is as follows:

Render a container with the same scale and size as the original image, and fill in a lighter background color

Load the mini image first and use the blur effect at the same time

The loading of the small image is complete. Start to request the big image.

The large image is loaded, show the large image, and hide the small image.

Therefore, on the whole, it is not complicated.

First of all, we can save the URL and size of both large and small images and obtain them dynamically through the data attribute of the tag. So, our HTML can be written like this:

The meanings of each parameter are:

Data-real-width: the width of the larger image

Data-real-height: the height of the larger image

Data-src: the URL of the small image

Src: the URL of a large image

At the same time, we need to define some class of CSS to deal with large and small images:

.blur-img-container {position: relative; background: # eeeeee; background-size: cover; overflow: hidden;} .blur-img-container img {position: absolute; top: 0; left: 0; width: 100%; height: 100%; opacity: 0; transition: all 0.4s ease-in-out;} .blur-img-container. Thumb-loaded {opacity: 1; filter: blur (10px) Transform: scale (1);} .blur-img-container. Large-loaded {opacity: 1;} .blur-img-container. Thumb-hidden {opacity: 0;}

Then, our focus is on the handling of JavaScript.

The padding-bottom of the container for each picture needs to be set dynamically to prevent page rearrangement

Control the style and progress of image through its onload event

* point to dynamically set the padding-bottom of our container. You can calculate the aspect ratio and convert it to a percentage:

Elem.style.paddingBottom = `${(realHeight / realWidth) * 100}%`

Second, use the onload event of the image to control the progress of loading:

Let thumb = new Image (); thumb.src = thumbSrc; thumb.onload = () = > {/ / small image loading complete, show small image, set style setStyle (thumb, 'thumb-loaded');}; elem.appendChild (thumb); let realImg = new Image (); realImg.src = lgSrc; realImg.onload = () = > {/ / large image loading completed, show large image, hide small image setStyle (realImg,' large-loaded') SetStyle (thumb, 'thumb-hidden');}; / / add a large image to the page elem.appendChild (realImg)

In fact, as long as the above two main functions are done well, our effect will basically be realized.

You can view the complete source code and example blur-image through my GitHub Repo.

At this point, I believe that everyone on the "css how to use Gaussian blur effect to gradually load pictures" have a deeper understanding, might as well to the actual operation of it! Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.