performance – lazy load images from placeholder

Finally I implemented the lazy load in my images without a complement. Also, I added a noscript tag under my images for SEO purposes.

But, I would like to implement a placeholder like Medium.com something like this:

    l

How can I add it?

Please help.

This is my php code

function lazy_thumbnail ($ post, $ myclass = "http://wordpress.stackexchange.com/") {
$ class = & # 39; slow charge & # 39 ;;
if ($ myclass) $ class. = "http://wordpress.stackexchange.com/". $ myclass;
// Get thumbnail source
$ thumbnail_id = get_post_thumbnail_id ($ post-> ID);
$ alt = get_post_meta ($ thumbnail_id, & # 39; _wp_attachment_image_alt & # 39 ;, true);
$ srcset = wp_get_attachment_image_srcset (get_post_thumbnail_id ($ post-> ID), & # 39; medium & # 39;);
$ image_alt = get_post_meta ($ post-> ID, & # 39; _wp_attachment_image_alt & # 39 ;, true);
$ thumb = wp_get_attachment_image_src (get_post_thumbnail_id ($ post-> ID), & # 39; medium & # 39;);

$ src = $ thumb['0'];
eco & # 39;http://wordpress.stackexchange.com/".$alt."http://wordpress.stackexchange.com/& # 39 ;;
eco & # 39;& # 39 ;;
}

And this is my JS code (I'm using the Intersection Observer)

document.addEventListener ("DOMContentLoaded", () => {
const lazyImages = [...qall(".lazy-load")]
    if (! lazyImages) return;
if ("IntersectionObserver" in the window) {
leave lazyImageObserver =
new IntersectionObserver ((tickets, observer) => {
entries.forEach (entry => {
if (entry.isIntersecting) {
leave lazyImage = entry.target;
lazyImage.src = lazyImage.dataset.src;
lazyImage.srcset = lazyImage.dataset.srcset;
lazyImage.classList.remove ("lazy-load");
lazyImageObserver.unobserve (lazyImage);
}
});
});
lazyImages.forEach (lazyImage => {
lazyImageObserver.observe (lazyImage);
});
}
});