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

This article mainly explains "how to load pictures lazily from simple to complex". Interested friends might as well take a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn "how to load pictures from simple to complex".

Why do you want to load pictures lazily?

Suppose that when a user visits a page, all the pictures on the page are loaded (even if they are not in the user's current window), in a weak network environment or a slow network environment, the download of these "redundant" images will occupy the user's already very limited bandwidth and harm the user experience (such as affecting the download of other resources). So for images on the site, it is ideal to load lazily (load on demand).

The principle of lazy loading of pictures

Within the browser, there is a set of priority definitions for various resources, and the browser will give priority to loading high-priority resources.

If we do not load the image lazily, by default, the priority of the resource is as follows.

These images marked as high take up download bandwidth from other resources and may cause some critical resources (such as xhr call) to load slowly and slow down the page speed.

Simple implementation of lazy loading of pictures

The idea of lazy image loading is generally when the page loads a small placeholder image (below 1kb), and then selectively loads the real picture through js.

The simplest implementation is as follows:

/ / index.css img [src] {filter: blur (0.2em);} img {filter: blur (0em); transition: filter 0.5s;} (function lazyLoad () {const imageToLazy = document.querySelectorAll ('img [SRC]'); const loadImage = function (image) {image.setAttribute ('src', image.getAttribute (' src')) Image.addEventListener ('load', function () {image.removeAttribute ("src");})} imageToLazy.forEach (function (image) {loadImage (image);})} ()

After lazy loading, the resource priority is as follows.

Advanced implementation of lazy loading of pictures-rolling loading

The above solution is not perfect, for the user, the picture that is not in the window may not be the picture that the user cares about at all, so we can make these pictures appear in the user window and then load.

With Intersection Observer, we can load the picture when it scrolls to the window.

(function lazyLoad () {const imageToLazy = document.querySelectorAll ('IMG [src]'); const loadImage = function (image) {image.setAttribute ('src', image.getAttribute (' src')); image.addEventListener ('load', function () {image.removeAttribute ("src") })} const intersectionObserver = new IntersectionObserver (function (items, observer) {items.forEach (function (item) {if (item.isIntersecting) {loadImage (item.target); observer.unobserve (item.target);}});}) ImageToLazy.forEach (function (image) {intersectionObserver.observe (image);})}) ()

The above demo are all in the repo of https://github.com/hateonion/lazy-load.

How to choose the right Placeholder picture

We used placeholder images in the above demo. In fact, whether the position of the images is determined or not has a great impact on our choice of placeholder images.

The picture size is known

The scenes that appear when the picture size is known are usually the picture of the blog post or some fixed-size thumbnail on the website. the size of these pictures is generally fixed and will not change. For this scenario, we can load placeholder images of the corresponding size (such as demo in the previous section). We can crop placeholder images of the corresponding size ourselves or use services like http://placeholder.com/ to get placeholder images.

Picture size unknown

When the size of the image is unknown, we usually need to generate the corresponding thumbnail and then load the thumbnail we generated to do placeholder. To generate these thumbnail, you can call imagemagick or some online image segmentation service (such as Qiniu).

Lazy loading prevents layout jitter

When the picture is loaded lazily, because the size of the picture is uncertain, it is difficult for the browser to calculate the position that needs to be reserved for the picture. So when the picture is loaded, there will be a jitter in the layout of the page.

(image from From http://davidecalignano.it/lazy-loading-with-responsive-images-and-unknown-height/)

Even if we choose a small placeholder that can be downloaded in milliseconds, users may not be aware of the layout jitter. However, on some devices with poor performance, the jitter of this layout will still affect the user experience to some extent. In order to completely avoid layout flicker, we can use aspect ratio boxes technology to make a placeholder element.

.lazy-load__container {position: relative; display: block; height: 0;} .lazy-load__container.feature {/ / feature image is set to 42.8% / / for other images such as post pictures, the aspect ratio may be different. You can use other css class to set padding-bottom: 42.8%;}. Lazy-load__container img {position: absolute Top:0; left:0; height: 100%; width: 100%;}

Result

The principle of the above implementation is actually very simple. Since padding-bottom (or padding-top) is declared as a percentage, the percentage is calculated based on the width of the box generated by the element, so we declare a container corresponding to the aspect ratio through padding-bottom. The specific size of the container is determined by the outer elements determined by the size, but the aspect ratio is always the same.

The size of the picture is set to the size of 100%container to ensure that the size of the picture is always the same as that of container.

It should be noted that the above method does not adapt to sites with inconsistent picture ratios (such as this site), but fortunately, for the sake of user experience, the picture ratio of most websites is now clearly required. in most cases, we can only adapt to ensure the width-to-height ratio of several pictures commonly used on the site.

Load pictures lazily like Medium

Medium's experience of lazily loading pictures is believed to have been experienced by students who have read the article in Medium, which can be said to be very smooth. And the technology behind it is actually the combination of several technologies we mentioned above.

Use aspect ratio box to create placeholder elements.

Only a small image is loaded during html parsing, and the blur effect is added.

Finally, use js to selectively load real images.

The Demo is as follows: codePen by Jos é M. P é rez

At this point, I believe that everyone has a deeper understanding of "picture lazy loading from simple to complex". You might as well do it in practice. 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.