How to use Image Lazy Loading

Lazy loading is a technique in web development that defers the loading of certain elements on a web page until they are needed. By only loading the elements that are actually visible to the user, lazy loading can significantly improve the performance of a website and provide a better user experience.

The Benefits of Lazy Loading

There are many benefits to implementing lazy loading on your website. Perhaps the most significant of these is improved page load speed. By only loading the elements that are immediately needed, the overall size of the page is reduced, and it can load more quickly. This is especially important for users on slow internet connections, as it can help to reduce the time they have to wait for a page to load.

Another benefit of lazy loading is that it can reduce the amount of data that is used when loading a page. This can be particularly useful for users who have limited data plans, as it can help to reduce the amount of data they use each month.

<img class="load" data-src="https://theskillstock.com/storage/app/public/images/How-to-Transfer-Data-between-Tables-in-Laravel.png" />
<!--Use your image or image link-->
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function () {
    var e = [].slice.call(document.querySelectorAll("img.load"));
    if ("IntersectionObserver" in window) {
        let n = new IntersectionObserver(function (e, t) {
            e.forEach(function (e) {
                if (e.isIntersecting) {
                    let t = e.target;
                    (t.src = t.dataset.src), t.classList.remove("load"), n.unobserve(t);
                }
            });
        });
        e.forEach(function (e) {
            n.observe(e);
        });
    }
});
</script>

I hope it will helpful for you...