How to Implement Lazy Loading in JavaScript

In this article, you are going learn the lazy loading JavaScript, exploring its benefits, implementation methods, and best practices.

In digital age, website performance plays an important role in attracting and accommodating users.

Slow-loading websites usually lead to high bounce rates and diminished user satisfaction. One of the practical method to conflict this issue is lazy loading.

Let’s move into the step-by-step process of implementing lazy loading in JavaScript to boost your website’s performance.

What is Lazy Loading?

Before we move on, let’s understand the concept of lazy loading. Lazy loading is a method used to extend the loading of assertive elements on a webpage until the user actually needs them.

Instead of loading all resources when the page originally loads, lazy loading loads resources on demand, as the user scrolls or interacts with the page.

Furthermore, Lazy loading is especially beneficial for websites with a large number of images, videos, or other media files.

By implementing lazy loading, you can decrease the initial loading time, through improving your website’s speed and performance.

Why Implement Lazy Loading?

• Faster Page Load Times
  • Lazy loading decreases the initial payload of a webpage, resulting in faster load times. This can lead to better user engagement and improved search engine rankings.
• Bandwidth Conservation
  • By loading only essential resources, lazy loading conserves bandwidth for users, specially those on slower connections or limited data plans.
• Improved User Experience
  • Faster loading times and decreased data usage contribute to a smooth and enjoyable user experience.
• Search Engine Optimization
  • Search engines grant website speed as one of the ranking factors. Lazy loading can certainly impact your website’s SEO performance.

HTML Markup for Lazy Loading

To begin with lazy loading, you will need to include the proper attributes in your HTML markup. The most simple method is using the loading attribute for images and iframes.

Here’s an example code:

<img src="imageSample.jpg" alt="Image" loading="lazy">
<iframe src="videoSample.mp4" title="Video" loading="lazy"></iframe>

Implementing Lazy Loading in JavaScript

Intersection Observer API

The Intersection Observer API is a dynamic tool for implementing lazy loading. It enables you to observe elements and execute functions based on whether they are in the viewport or not.

Let’s see an example code:

const lazyLoadValue = (target) => {
  const expression = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const img = entry.target;
        img.src = img.dataset.src;
        observer.unobserve(img);
      }
    });
  });

  expression.observe(target);
};

const images = document.querySelectorAll("img[data-src]");

images.forEach(lazyLoadValue);

Lazy Loading for Background Images

For lazy loading background images, we can use the data-* attribute to keep the image URL and set it as the background image when the element is in the viewport.

<div class="lazy-bg" data-bg="imagesample.jpg"></div>

const lazyLoading = (target) => {
  const value = new IntersectionObserver((entries, observer) => {
    entries.forEach((entry) => {
      if (entry.isIntersecting) {
        const backgroundImage = entry.target;
        backgroundImage.style.backgroundImage = `url(${backgroundImage.dataset.bg})`;
        observer.unobserve(backgroundImage);
      }
    });
  });

  value.observe(target);
};

const lazyBgElements = document.querySelectorAll(".lazy-bg");

lazyBgElements.forEach(lazyLoading);

Best Practices for Lazy Loading

To make sure the best results, follow these best practices when implementing lazy loading:

• Prioritize “Above the Fold” Content
  • Lazy load content below the fold first to set up the basic rendering of content visible to users.
• Use WebP Format
  • Consider using the WebP image format for better compression and smaller image sizes.
• Optimize Image Sizes
  • Resize images to the dimensions needs on the webpage to decrease file sizes further.
• Test Across Browsers
  • Ensure compatibility across different web browsers and devices.
• Handle JavaScript Disabled Scenarios
  • Provide alternative content for users with JavaScript disabled.
• Test Website Performance
  • Frequently test your website’s performance to determine and address any issues.
• Combine with Caching
  • Combine lazy loading with appropriate caching methods to maximize performance.

FAQs

Conclusion

In conclusion, implementing lazy loading in JavaScript is a powerful method to optimize your website’s performance and increase user experience.

By delaying the loading of random resources, you can significantly decrease initial load times and conserve bandwidth, leading to happier users and improved search engine rankings.

Additional Resources

• What is Type Coercion in JavaScript?
• JavaScript Async Constructor
• How to Use onMouseover in JavaScript

Adones Evangelista

Programmer & Technical Writer at PIES IT Solution

Adones Evangelista is a programmer and writer at PIES IT Solution, author of over 900 tutorials and error-fix guides at itsourcecode.com. Specializes in JavaScript, Django, Laravel, and Python error debugging covering ValueError, TypeError, AttributeError, ModuleNotFoundError, and RuntimeError, plus C/C++ and PHP capstone projects for BSIT students.

Expertise: JavaScript · Python · Django · Laravel · Error Debugging · C/C++
 · View all posts by Adones Evangelista →