• Top Image Lazy Loading Libraries for JavaScript
  • By Mahdhi Rezvi
  • Translation from: The Gold Project
  • This article is permalink: github.com/xitu/gold-m…
  • Translator: zenblo
  • Proofreader: Rocwong-cn, JohnieXu

Share nine JavaScript image lazy loading libraries

Why do images load lazily

Performance is critical in Web applications. You can have the most beautiful, attractive website in the world, but if it doesn’t load quickly in a browser, people are inclined to skip it. Getting your site to perform very well can be tricky. This is because there are many bottlenecks in Web development, such as performance-intensive JavaScript, slow-parsing Web font displays, oversized image resources, and so on.

In this article we focus on the impact of image resources on the website. According to Jecelyn, a web page consumes an average of 5MB of traffic just to load images. This can be a heavy burden for users, as mobile traffic is very expensive in some countries. Users can also experience sites that take too long to load, especially with slow Internet connections. These can have a negative impact on your site.

According to Jakob Nielson, here are some important statistics you should keep in mind:

  • A site loading time of less than 100 milliseconds is considered instantaneous.
  • Delays between 100 and 300 milliseconds are perceived.
  • Forty-seven percent of users expect web pages to load in two seconds or less.
  • 40% of users will wait no more than 3 seconds for a site to load before abandoning it.

What is lazy loading

Lazy loading is one of several strategies you can use to efficiently service your site’s image resources without compromising performance or quality. Lazy loading is when you load only what you need and defer the rest until you need it. This policy can be applied to images, videos, text, and other types of data. But for the most part, it works with large volumes of content such as image resources.

There are several ways to achieve lazy image loading on your site. You can use the Intersection Observer API, for example, or use an event handler to determine whether an element is in the view. There are also several powerful JavaScript libraries, and you can use the following methods of image lazy loading libraries, depending on your needs and compatibility. Let’s find out!

Lazy Sizes

Lazy Sizes is one of the best Lazy loading libraries out there, with over 14.1K favorites on Github, but it’s only 3.4KB down to size. The library is 98.5% browser-friendly, and its documentation is easy to understand.

The characteristics of

  • Includes support for responsive images.
  • Optimize SEO by detecting search engines with the help of user agents and loading all images immediately.
  • Based on efficient and practical code.
  • Preloads resources when the network connection is idle.
  • Includes support for LQIPs.
  • supportIntersectionObserver,MutationObserver 和 getElementsByClassNameAnd so on.
  • Support for using plug-ins to extend features.
  • Supports automatic calculation of response image size.

You can see an example here.

Lozad.js

Lozad.js supports lazy loading of images, iframes, ads, videos, and other elements. It has a nearly 6.4K star on Github and is very popular with the community. According to the research team, the library is used by web apps from several brands, including Tesla, Domino, Xiaomi and BBC. It is very small, only 1.1 KILobytes compressed. Since it uses IntersectionObserver API and MutationObserver API, its browser approval rating is only about 92%.

The characteristics of

  • There are no dependencies.
  • Lazy loading of dynamically added elements is supported.
  • Use JavaScript entirely.
  • Includes support for LQIPs and response images.
  • Than usinggetBoundingClientRect()Is more efficient.
  • Polyfills can be used in unsupported browsers.

You can be inhereSee examples.

The Tuupola the Lazyload

Lazyload by Tuupola is another popular image lazy loading library on Github, with nearly 8.4k star. It uses the IntersectionObserver API and is easy to use. At 956 bytes, it is smaller than any other library. This can be attributed to the fact that it only uses the IntersectionObserver API, as other libraries use other combinations to achieve better compatibility and performance. In addition, because of this, its browser currently has a 92% approval rating.

The characteristics of

  • For convenience, it includes a jQuery wrapper.
  • Includes support for LQIPs and response images.
  • The core can be configured by passing other parametersIntersectionObserverAPI.

Andrea Verlicchi 的 Vanilla Lazyload

Vanilla Lazy Load is another pure JavaScript library for lazily loading images, videos, and iframes. It’s very popular on Github, with nearly 1,500 repositories and packages available. It has more than 1.9 million downloads per year on NPM. When you compress it down to just 2.7 kilobytes. Similar to the other libraries, this library uses IntersectionObserver API and currently has a browser approval rating of 92%.

  • Seo friendly because the library does not cover images from search engines.
  • Support for unstable network connections, as the library automatically reloads images when the connection is lost.
  • If the image exits the viewport, the loading of the image is cancelled.
  • Includes support for LQIPs and response images.
  • Use JavaScript entirely.

You can see an example here.

Yall.js

Yall.js is another JavaScript library that only uses IntersectionObserver API to lazily load images, videos, iframe and CSS background images. The library is about 1.1k star and has 91 users in its project library. This library can be compressed to 1kB. As we have seen in the previous library, yall.js has 92% browser approval due to its use of IntersectionObserver API. It must be noted that if the browser does not support the IntersectionObserver API, there will be no backup. You must use a polyfill in that case.

The characteristics of

  • With the help ofMutationObserverThe API supports detection of dynamically loaded elements.
  • With the help ofrequestIdleCallbackMethods Optimize the browser idle time.
  • Supported bysrcProperty directly implements LQIP.
  • Supports lazy loading of CSS background images.

Layzr.js

Layzr.js is a lightweight JavaScript based lazy image loading library. It mainly uses element.classList, with few ES5 array methods and requestAnimationFrame methods. Thanks to these apis, the library is supported by over 97% of browser users. Layzr.js has over 5.6k favorites on Github and is so popular that it has been reduced to just 1kB.

  • Does not depend on any other libraries.
  • Select image sources intelligently based on browser compatibility and availability.
  • Support for dynamically added elements.
  • Clear and concise documentation and examples.
  • Viewports with threshold properties adjust the lazy loading of images, which can be loaded earlier or later as needed.

You can be inhereSee examples.

Blazy.js

Blazy.js is another lightweight JavaScript lazy loading library that can handle images, videos, and iframes. It is very popular on Github, has 2.6K star, and currently has over 860 open source project libraries in use. It’s only 1.9kB compressed.

Use Element. GetBoundingClientRect () method, compared with other libraries realize IntersectionObserver API, this method may not be able to perform. But because of this approach, the library is supported by over 98% of browser users. It also uses element.closest (). Browser support for this API is just over 94%. In this case, you don’t have to worry about the missing 6%, because the library contains a Polyfill for unsupported browsers.

The characteristics of

  • For actual websites that get millions of visitors a month.
  • There are no dependencies.
  • Support response images.
  • Something like layzr.js allows you to load elements with offsets.
  • Clear documentation with sample code.
  • Supports AMD, CommonJS, and Globals module formats.
  • Very easy to provide retinal images.

You can be inhereSee examples.

Responsively Lazy

Responintegrlazy is also a lazy loading library for images. Its content is compact, compressed to just 1.1 KILobytes. It stands out from many other libraries because of its good syntax implementation. Most of the libraries we’ve discussed above require that you use the noScript tag, ignore the SRC attribute, and so on for javascript disabled browsers. Lazy, however, can use the traditional SRC attribute and add srcset and data-src attributes for supported browsers. This makes the library SEO friendly. The library also use Element. GetBoundingClientRect () as a result, therefore mandatory layout rearrangement will also appear in the library.

In addition, the library has nearly 1.1k star on Github and is supported by almost 95% of browser users.

The characteristics of

  • Support responsive images.
  • Supports webP images.
  • Search Engine optimization (SEO) friendly.
  • There are not many customizations available.

You can be inhereSee examples.

LazyestLoad.js

Lazyestload.js is one of the smallest libraries in this list. It’s only 700 bytes, a mere 639 bytes compressed. There are two versions of this library, LazyLoad and LazyestLoad. They all have different uses. The Lazyload version works like a regular library, with images being loaded as they are about to enter the viewport. But the LazyestLoad version only loads an image when the user has stopped scrolling and the image is in the viewport or within 100 pixels. This helps reduce network load if users just scroll without pausing to see pictures.

It mainly use Element. GetBoundingClientRect () method, compared with other implementation efficiency is not high, also known as the trigger layout rearrangement.

This library only works with images, unlike other libraries that can work with videos and iframes. It also has more than 1.5K of Star on Github.

The characteristics of

  • Simple and straightforward.
  • You don’t allow as much customization as you do with other libraries.
  • Support responsive images.
  • The documentation is not detailed enough.

You can check out the LazyLoad example and the LazyestLoad example.

As most modern browsers will support native lazy loading, a native implementation is recommended. Native lazy loading also ensures that images can be loaded lazily even if JavaScript is disabled in the browser. Simply use loading=”lazy” in the IMG tag to save all the trouble.

Most modern browsers support native lazy loading, and Safari is coming soon. Currently, the browser has 74% support, and if the browser does not support the native implementation, you can use Polyfill or one of the lazy loading libraries mentioned above.

For security reasons, you may still need to implement one of the libraries using dynamic imports.

Know your target audience

If you take a closer look at all the given libraries above, you’ll find that they compete fiercely in three areas: performance, size, and browser compatibility (user coverage). These usually have to sacrifice at least one to raise the level of the other.

For example, if you use a library that implements the IntersectionObserver API, you will get a high performance library, but it will have a smaller user reach. If you need to tink, you need to have a backup option, such as Polyfills, which increases the overall size of the library.

In another example, if the lazy loading library uses the getBoundingClientRect() method, its performance will be worse than that of the IntersectionObserver API, which is known to have forced layout backflow problems. Although performance is sacrificed, user coverage will be higher. I wish I could make that clear.

How can you minimize compatibility issues and maximize performance?

You can improve these areas by understanding your target audience and their browser usage. If you know your target audience and what browsers they use, you can make sure that your lazy loading implementation is better suited to those browser versions. This will reduce the need to include polyfills for unsupported browsers because you already know which browsers to focus on. When you have an outlier (not supported by browsers), the image can be loaded directly without any delay or delay. If you have a good understanding of your audience, the number of outliers will be negligible.

This approach will help to use a well-performing implementation library, keep the library size to a minimum by ignoring browser exceptions, and support the browser version of the target user.

This article briefly discussed lazy loading libraries for JavaScript and some ways to increase efficiency and improve the user experience. Let us know in the comments below.

Thanks for reading and happy coding!!

If you find any errors in the translation or other areas that need improvement, you are welcome to revise and PR the translation in the Gold Translation program, and you can also get corresponding bonus points. The permanent link to this article at the beginning of this article is the MarkDown link to this article on GitHub.

Diggings translation project is a community for translating quality Internet technical articles from diggings English sharing articles. The content covers the fields of Android, iOS, front end, back end, blockchain, products, design, artificial intelligence and so on. For more high-quality translations, please keep paying attention to The Translation Project, official weibo and zhihu column.