When this occurs, a handler function is invoked to help handle other parts of our code logic, as we will see later on. Lazy loading is built on top of the Intersection Observer API, which is a browser API that provides a way of detecting or knowing when an element called a target, a parent element, or becomes available or visible inside the browsers viewport, as the case may be. As we continue with this article, we will get to learn more about other use cases in real-life environments. While this might seem trivial and simple, the way we display this content to our users determines how performant our platform is at the end of the day.įurthermore, actions that would help optimize our page load time, like events that are dependent on whether a user scrolls to a particular portion of our webpage, are some of the use cases of lazy loading. Judging by the data, most websites rely heavily on images and other web content like videos or iframes to pass information across to their target audience. Certainly, you should now have an understanding of what this will lead to, as we have earlier discussed. The advantages of lazy loading become obvious when we have a bunch of images and videos, and we load them all at once on initialization of the browser DOM. Web performance and accessibility issues are known to be multifaceted reducing page size, memory footprint, and general load time can contribute a great deal to a web platform. Lazy loading solves the problem of reducing initial page load time - displaying only resources like images or other content that a user needs to see on initializing a webpage and as the page is subsequently scrolled. However, for browsers that don’t offer this support yet, polyfills or libraries that implement this technique provide simple API layers above them.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |