Let me share with you nine JavaScript image lazy loading libraries

javascriptThe column introduces several image lazy loading libraries.

Related free learning recommendations:javascript(video)

Why do we need lazy loading of images

Performance is critical in web applications. You can have the most beautiful and attractive website in the world, but if it doesn’t load quickly on a browser, people will tend to skip it. Getting your website to perform really well can be quite tricky. This is because there are many bottlenecks in web development, such as expensive JavaScript, slow web font display, bulky image resources, etc.

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

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

• Website load times below 100 milliseconds are considered instantaneous.
• Latency between 100 and 300 milliseconds is perceptible.
• 47% of consumers expect web pages to load in two seconds or less.
• 40% of consumers will wait no more than 3 seconds to load before abandoning a website.

What is lazy loading?

There are several strategies that can provide efficient services for the image resources of the website without affecting performance and quality, and lazy loading is one of them. Lazy loading means loading only what is needed and deferring the rest until needed. This strategy can be applied to images, videos, text, and other types of data. But mostly, it's suitable for bulky content like image assets.

There are several ways to implement lazy loading of images on your website. For example, you can use theIntersection Observer API, or use an event handler to determine whether an element is in view. There are also several powerful JavaScript libraries. You can use the following image lazy loading library methods according to your needs and compatibility. Let’s take a look!

Lazy Sizes

Lazy Sizes is one of the best lazy loading libraries currently, with more than 14.1K collections on Github, and only 3.4kB after compression. It also supports approximately 98.5% of browser users, and its documentation is written in an easy-to-understand manner.

Features

• Contains support for responsive images.
• Optimize SEO by detecting search engines with the help of user agents and loading all images instantly.
• Based on efficient and practical code.
• Preload resources when the network connection is idle.
• Contains support for LQIPs.
• SupportsIntersectionObserver,MutationObserverandgetElementsByClassNameetc.
• Supports the use of plug-ins to extend features.
• Supports automatic calculation of response image size.

You can see examples here.

Lozad.js

Lozad.js supports lazy loading of images,iframe, ads, videos and other elements. It has nearly 6.4K collections on Github and is very popular in the community. According to the research team, this library is used by web applications of several brands, including Tesla, Domino, Xiaomi, and the BBC. It's very small, only 1.1kB gzipped. Since it uses theIntersectionObserverAPI and theMutationObserverAPI, it supports around 92% of browser users.

Features

• There are no dependencies.
• Support lazy loading of dynamically added elements.
• Uses entirely JavaScript.
• Contains support for LQIPs and response images.
• More efficient than libraries usinggetBoundingClientRect().
• Polyfills can be used on unsupported browsers.

You can see examples here.

Tuupola’s Lazyload

Tuupola’s Lazyload is another popular image lazy loading library on Github, with nearly 8.4K collections. It uses theIntersectionObserverAPI and is simple and easy to use. It is only 956 bytes after compression, which is smaller than other libraries. This can be attributed to the fact that it only uses theIntersectionObserverAPI, as other libraries use other combinations to achieve better compatibility and performance. Furthermore, thanks to this, 92% of browser users currently support it.

Features

• It includes a jQuery wrapper for convenience.
• Includes support for LQIPs and response images.
• The coreIntersectionObserverAPI can be configured by passing additional parameters.

Vanilla Lazyload by Andrea Verlicchi

Vanilla lazy load is another pure JavaScript library for lazy loading of images, videos and iframes. It is very popular on Github, with nearly 1500 repositories and packages available. It has over 1.9 million downloads per year on NPM. It's only 2.7kB compressed. Similar to other libraries, this library uses theIntersectionObserverAPI, which is supported by 92% of browser users.

• SEO friendly as the library does not cover images from search engines.
• Supports unstable network connections as the library will automatically reload images after the connection is interrupted.
• If the image exits the viewport, cancel loading of the image.
• Contains support for LQIPs and response images.
• Uses entirely JavaScript.

#You can see an example here.

Yall.js

Yall.js is another JavaScript library that also only uses theIntersectionObserverAPI to lazy load images, videos,iframeand CSS background image. This library has approximately 1.1K collections and is used by 91 users in their project libraries. This library can be compressed to 1kB. As we saw with previous libraries, Yall.js also supports 92% of browser users because of the use of theIntersectionObserverAPI. It is important to note that if the browser does not support theIntersectionObserverAPI, there will be no backup. In that case you must usepolyfill.

Features

• Supports the detection of dynamically loaded elements with the help ofMutationObserverAPI.
• Use therequestIdleCallbackmethod to optimize browser idle time.
• Supports direct implementation of LQIP through thesrcattribute.
• Support lazy loading of CSS background.

Layzr.js

Layzr.js is a lightweight image lazy loading library based on JavaScript. It mainly usesElement.classList, with few ES5 array methods andrequestAnimationFramemethods. Thanks to these APIs, more than 97% of browser users support this library. Layzr.js has more than 5.6K collections on Github and is very popular. It is only 1kB after compression.

• There are no dependencies.
• Intelligent selection of image sources based on browser compatibility and availability.
• Support dynamically added elements.
• Clear and concise documentation and examples.
• Viewport adjustment images withthresholdproperties are lazy loaded, allowing images to be loaded earlier or later as needed.

You can see examples here.

Blazy.js

Blazy.js is another lightweight JavaScript lazy loading library that can handle images, videos andiframe. It is very popular on Github with 2.6K collections and is currently used by over 860 open source project libraries. It's only 1.9kB compressed.

Use theElement.getBoundingClientRect()method, which may not perform as well as other libraries implementing theIntersectionObserverAPI. But due to this approach, this library is supported by more than 98% of browser users. It also usesElement.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 apolyfillfor unsupported browsers.

Features

• Used on real websites with millions of monthly visits.
• There are no dependencies.
• Support responsive images.
• Similar to Layzr.js allows loading elements with offsets.
• Clear documentation with example code.
• Supports module formats such as AMD, CommonJS and globals.
• Very easy to provide retina pictures.

You can see examples here.

Responsively Lazy

Responsively lazy is also a lazy loading library for images. Its content is concise, only 1.1kB compressed. Because of its good syntax implementation, it stands out from many libraries. Most of the libraries we discussed above require you to use thenoscripttag for browsers that disable javascript, ignore thesrcattribute, etc. But lazy can use the traditionalsrcattribute and addsrcsetandsrcattributes for supported browsers. This makes this library search engine optimization (SEO) friendly. This library also usesElement.getBoundingClientRect()so forced layout reflows will also occur in this library.

In addition, this library has nearly 1.1K collections on Github, and almost 95% of browser users support this library.

Features

• Support responsive images.
• Support webp.
• Search Engine Optimization (SEO) friendly.
• Not many customizations available.

You can see examples here.

LazyestLoad.js

LazyestLoad.js is one of the smallest libraries on this list. It's only 700 bytes, compressed to just 639 bytes. There are two versions of this library,lazyloadandlazyestload. They all have different uses, thelazyloadversion works like the normal library, the image will load when it is about to enter the viewport; however thelazyestloadversion only loads when the user stops scrolling and the image The image will only load if it is in the viewport or within 100 pixels. This helps reduce network load if the user is just scrolling without pausing to see the image.

It mainly uses theElement.getBoundingClientRect()method, which is not efficient compared to other implementations and is also known to trigger layout rearrangements.

This library only handles images, unlike other libraries that can handle videos andiframe. It also has over 15,000 collections on Github.

Features

• Simple and straightforward.
• Does not allow extensive customization like other libraries.
• Support responsive images.
• The documentation is not detailed enough.

You can view the lazyload example and view the lazyestload example.

---

As most modern browsers will support native lazy loading, it is recommended to use native implementations. Native lazy loading also ensures that images load lazily even if JavaScript is disabled in the browser. Just use theloading="lazy"attribute in theimgtag and save yourself all the trouble.

Most modern browsers support native lazy loading, and Safari will soon support it. Currently, the browser support rate is 74%. If the browser does not support the native implementation, you can use polyfill or one of the above lazy loading libraries.

To be safe, you may still need to use dynamic imports to implement one of the libraries.

Know your target audience

If you carefully analyze all the above given libraries, you will find that they compete fiercely in three aspects: performance, size and browser compatibility ( user coverage). These usually have to sacrifice at least one to improve the level of the other.

For example, if you use a library that implements theIntersectionObserverAPI, you will get a high-performance library, but its user coverage will be smaller. If patching is required, there needs to be a fallback option, such aspolyfills, which will increase the overall size of the library.

In another example, if the lazy loading library uses thegetBoundingClientRect()method, it will not perform as well as theIntersectionObserverAPI because it is known to have forced layout reflow issues . Although performance is sacrificed, user coverage will be higher than the former. Hope I can make this clear.

How to minimize compatibility issues and maximize performance?

These areas can be improved by understanding your target audience and their browser usage. If you know your target audience and the browsers they use, you can ensure that your implementation of lazy loading is better suited for those browser versions. This will reduce the need to includepolyfillfor unsupported browsers since it will already be known which browsers need to be concerned. When you have an outlier (unsupported browser), images can load directly without any lag or delay. If you have a good understanding of your audience, the number of these outliers will be negligible.

This approach will help to use an implementation library that performs well, keeps the library size to a minimum by ignoring browser exceptions, and supports the target user's browser version.

---

This article briefly discusses JavaScript’s lazy loading library and some methods to improve efficiency and user experience. Have your say in the comments below.

Thanks for reading and happy coding! !

The above is the detailed content of Let me share with you nine JavaScript image lazy loading libraries. For more information, please follow other related articles on the PHP Chinese website!