![]() ![]() ![]() You can run and “remix” the code on Glitch below. There are plenty lazy loading libraries and plugins (which I include at the end of this post), but this is a fun way to understand how the Intersection Observer API works and how lazy loading works at the most basic level. We’re going to do this in plain HTML, CSS, and JS-no libraries or dependencies. In this post, we are building an image gallery that implements lazy loading. But thanks to the Intersection Observer API, which is already supported by most modern browsers, we can now implement lazy loading in under 20 lines of JavaScript! This used to be a messy effort, which involved adding/removing multiple event listeners and comparing sizes and positions. Image from the film “Spirited Away” (2001) It is potentially a waste of time, resources, and-referring to the former-users’ bandwidth (which equals money for users on mobile data). Not lazy loading your images is like ordering everything on the menu without knowing how much you’ll be able to eat. If your page contains, say, 20 images with total size of 5MB, but your user only scrolls to the third image, then it would not be necessary to request and load all 20 images immediately. “Lazy loading” is a technique that loads images or videos only when they are needed-that is, when they appear on screen. Improve your website’s speed and performance by “lazy loading” images with Intersection Observer API in just a few lines of vanilla JavaScript. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |