{"id":8811,"date":"2025-04-22T18:47:42","date_gmt":"2025-04-22T13:17:42","guid":{"rendered":"https:\/\/pheonixsolutions.com\/blog\/?p=8811"},"modified":"2025-04-22T18:47:46","modified_gmt":"2025-04-22T13:17:46","slug":"lazyloading-in-javascript","status":"publish","type":"post","link":"https:\/\/pheonixsolutions.com\/blog\/lazyloading-in-javascript\/","title":{"rendered":"LAZYLOADING IN JAVASCRIPT"},"content":{"rendered":"\n

Lazyloading :<\/strong><\/p>\n\n\n\n

Lazyloading is a technique used in web development to delay the loading of non essential resources such as images and videos or script until they are needed.
Lazy loading helps faster Initial Load time ,Improves Performance,Enhances user Experience.<\/p>\n\n\n\n

Loading Attribute :<\/strong><\/p>\n\n\n\n

Here is an example demonstrating lazyloading of images using the loading attribute<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

loading attribute allows a browser to defer loading offscreen image and i frames
Delays loading the resources images or iframe until about to enter the viewport. Ideal for below the fold content like galleries , embedded videos or scroll pages.<\/p>\n\n\n\n

Intersection Observer API :<\/strong>
Here is an example demonstrating lazyloading of images using the Intersection Observer API<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

data-src is a custom attribute ,it’s stores the actual image URL temporarily without loading it right away .<\/p>\n\n\n\n

\"\"<\/a><\/figure>\n\n\n\n

Code Explanation :<\/strong><\/p>\n\n\n\n

    \n
  • const lazyImg =document.querySelector(‘.lazy’); –> this should be ‘queryselectorall ‘ if want to select all images .<\/li>\n<\/ul>\n\n\n\n
      \n
    • const observer = new IntersectionObserver((entries,observer)=>{} –> it watches to see when they come into the viewport.<\/li>\n\n\n\n
    • entries.forEach(entry =>{} –> Loops through every observed element image that changed visibility <\/li>\n\n\n\n
    • if(entry.isIntersecting){} –> This checks if the image is visible on the screen , only then do we load it <\/li>\n\n\n\n
    • const img = entry.target –> get the image element <\/li>\n\n\n\n
    • img.src=img.dataset.src –> Image starts loading <\/li>\n\n\n\n
    • img.classList.remove(‘lazy’) –> Remove the lazy class <\/li>\n\n\n\n
    • observer.unobserve(img) –> stop observing this image since it’s already loaded.<\/li>\n\n\n\n
    • lazyImg.forEach(img=>observer.observe(img)) –> whenever they appear on screen the observer will trigger load them.<\/li>\n<\/ul>\n\n\n\n

      Benefits of lazyloading :<\/strong> Faster page load improves performance & scrolling Saves user bandwidth Reduces the server load Load’s only what’s needed<\/p>\n\n\n\n

      Lazyloading is used image galleries , e-commerce product lists ,embedded videos ,infinite scroll pages, mobile apps,long landing pages and dynamic content loading .
      <\/p>\n","protected":false},"excerpt":{"rendered":"

      Lazyloading : Lazyloading is a technique used in web development to delay the loading of non essential resources such as […]<\/p>\n","protected":false},"author":520,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_feature_clip_id":0,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":false,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2},"jetpack_post_was_ever_published":false},"categories":[1022],"tags":[],"class_list":["post-8811","post","type-post","status-publish","format-standard","hentry","category-web-architecture","psol-cat-web-architecture"],"jetpack_publicize_connections":[],"jetpack_shortlink":"https:\/\/wp.me\/phn2x7-2i7","jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8811","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/users\/520"}],"replies":[{"embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/comments?post=8811"}],"version-history":[{"count":0,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/posts\/8811\/revisions"}],"wp:attachment":[{"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/media?parent=8811"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/categories?post=8811"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/pheonixsolutions.com\/blog\/wp-json\/wp\/v2\/tags?post=8811"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}