Lazy Load Image

How to Use:

1. Input Image URLs: Paste URLs (one per line) into the input box.
2. Generate Code: Click "Generate Lazy Load HTML" to create the lazy-loading HTML code.
3. Copy and Implement: Copy the generated code and place it in your blog content.

Features:

• Automatically generates lazy-load HTML using data-src attributes.
• Includes a script suggestion for implementing lazy loading.
• Download or copy the generated code for easy integration.

This tool improves your blog's loading time by loading images only when they enter the viewport.

Lazy Load Image Script Generator

Enter Image URLs (one per line):

Lazy Load HTML Code:

Tips for Implementation:

• Place the generated code inside your blog's content where images should appear.
• Ensure you add the following lazy-load script to your website's ``:

  <script>
  document.addEventListener("DOMContentLoaded", function() {
    const lazyImages = document.querySelectorAll("img[data-src]");
    const observer = new IntersectionObserver(entries => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          const img = entry.target;
          img.src = img.dataset.src;
          img.removeAttribute("data-src");
          observer.unobserve(img);
        }
      });
    });
  
    lazyImages.forEach(image => observer.observe(image));
  });
  </script>