Hi Dev,
In this example,I will learn you how to implement seo friendly lazy loading of images. we will show example of seo friendly lazy loading of images. you can easyliy implement lazy loading of images.
What is Lazy Loading?
Lazy loading is an optimization technique for the online content, be it a website or a web app.
Instead of loading the entire web page and rendering it to the user in one go as in bulk loading, the concept of lazy loading assists in loading only the required section and delays the remaining, until it is needed by the user.
Here, I will give you full example for simply seo friendly lazy loading of images as bellow.
Example
<!DOCTYPE html>
<html>
<head>
<title>SEO Friendly Lazy Loading of Images example</title>
</head>
<body>
<h1>SEO Friendly Lazy Loading of Images Example</h1>
//image-lazy
<img class="lazy-image" data-src="yourImagePath.jpg" />
<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.lazy-image"));
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("lazy-image"), n.unobserve(t);
}
});
});
e.forEach(function (e) {
n.observe(e);
});
}
});
</script>
</body>
</html>
It will help you...