{"id":148486,"date":"2018-10-20T15:09:45","date_gmt":"2018-10-20T15:09:45","guid":{"rendered":"https:\/\/webkul.com\/blog\/?p=148486"},"modified":"2024-04-17T06:54:23","modified_gmt":"2024-04-17T06:54:23","slug":"intersection-observer-in-javascript","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/intersection-observer-in-javascript\/","title":{"rendered":"Intersection Observer in Javascript"},"content":{"rendered":"\n

Today we will discuss about the Intersection Observer api<\/strong> in Javascript with example. So starting from why do we need Intersection Observer api<\/strong> in Javascript?<\/p>\n\n\n\n

where do we will apply it ? and most importantly what is Intersection Observer api ?<\/strong><\/p>\n\n\n\n

lets understand one by one.<\/p>\n\n\n\n

What is Intersection Observer api ?<\/h3>\n\n\n\n

Intersection Observer asynchronously observe changes in the target element with the top-level document’s viewport<\/a>.<\/p>\n\n\n\n

We will have a target element each time which will be observed.\u00a0Whenever the target meets a threshold specified for the\u00a0IntersectionObserver<\/code>, the callback is invoked. The callback receives a list of\u00a0\u00a0objects and the observer. We will have a complete example for the above definition<\/p>\n\n\n\n

There are other questions remaining as mentioned above lets explore them as well.<\/p>\n\n\n\n

Why do we need Intersection Observer api<\/strong> in Javascript?<\/h2>\n\n\n\n

As we all know about lazy loading concept, for further details about lazy loading look at this tutorial from developer google<\/a> .<\/p>\n\n\n\n

The basic concept of lazy loading is to reduce as much as HTTP Request from server. Each image request treat as a HTTP request so if a page consist of 50 image approx then it consist of atleast 5o HTTP request which makes slow load time of site. and less interaction of user on site.<\/p>\n\n\n\n

So lazy loading can be implemented on such cases where only such viewport images will be loaded on page while other images will be loaded on scroll by end user.<\/p>\n\n\n\n

lazy loading concept can be implemented in various ways by developers using javascript and of core implementation using   Intersection Observer api.<\/strong><\/p>\n\n\n\n

Problem Faced While Own lazy loading concept using calculation via javascript –<\/h2>\n\n\n\n

Few Drawbacks are mentioned below –<\/p>\n\n\n\n