Related free learning recommendations: javascript (video)
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:
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 the Intersection 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 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.
IntersectionObserver, MutationObserver and getElementsByClassName etc. You can see examples here.
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 the IntersectionObserver API and the MutationObserver API, it supports around 92% of browser users.
getBoundingClientRect(). You can see examples here.
Tuupola’s Lazyload is another popular image lazy loading library on Github, with nearly 8.4K collections. It uses the IntersectionObserver API 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 the IntersectionObserver API, as other libraries use other combinations to achieve better compatibility and performance. Furthermore, thanks to this, 92% of browser users currently support it.
IntersectionObserver API can be configured by passing additional parameters. 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 the IntersectionObserver API, which is supported by 92% of browser users.
#You can see an example here.
Yall.js is another JavaScript library that also only uses the IntersectionObserver API to lazy load images, videos, iframe and 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 the IntersectionObserver API. It is important to note that if the browser does not support the IntersectionObserver API, there will be no backup. In that case you must use polyfill.
MutationObserver API. requestIdleCallback method to optimize browser idle time. src attribute. Layzr.js is a lightweight image lazy loading library based on JavaScript. It mainly uses Element.classList, with few ES5 array methods and requestAnimationFrame methods. 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.
You can see examples here.
Blazy.js is another lightweight JavaScript lazy loading library that can handle images, videos and iframe. 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 the Element.getBoundingClientRect() method, which may not perform as well as other libraries implementing the IntersectionObserver API. But due to this approach, this library is supported by more than 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.
You can see examples here.
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 the noscript tag for browsers that disable javascript, ignore the src attribute, etc. But lazy can use the traditional src attribute and add srcset and src attributes for supported browsers. This makes this library search engine optimization (SEO) friendly. This library also uses Element.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.
You can see examples here.
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, lazyload and lazyestload. They all have different uses, the lazyload version works like the normal library, the image will load when it is about to enter the viewport; however the lazyestload version 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 the Element.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 and iframe. It also has over 15,000 collections on Github.
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 the loading="lazy" attribute in the img tag 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.
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 the IntersectionObserver API, 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 as polyfills, which will increase the overall size of the library.
In another example, if the lazy loading library uses the getBoundingClientRect() method, it will not perform as well as the IntersectionObserver API 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 include polyfill for 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!
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
