Hey All,

Is there a way to Lazy Load images in the Description box on the Proddetail page?

I can Lazy Load images on non product pages using some javascript with class="lazy" and using data-scr="/example-image.jpg"

I got this info from here: https://css-tricks.com/the-complete-guide-to-lazy-loading-images/ I'm using Method #2 Intersection Observer API

When I use data-src=" for a picture in the proddetail page and save... it changes it to data-="" src=" and then the images won't even load.

This was tried using CKEDITOR

I switched to FROALA and the data-src remained in place but the class="lazy" switched to: class="lazy fr-fic fr-dii"

Side Note: Neither of the HTML editors were able to display the image using data-scr= format.

Patrick

This is the script I am using that works great for lazy loading on other pages

<script>
document.addEventListener("DOMContentLoaded", function() {
var lazyloadImages;

if ("IntersectionObserver" in window) {
lazyloadImages = document.querySelectorAll(".lazy");
var imageObserver = new IntersectionObserver(function(entries, observer) {
entries.forEach(function(entry) {
if (entry.isIntersecting) {
var image = entry.target;
image.src = image.dataset.src;
image.classList.remove("lazy");
imageObserver.unobserve(image);
}
});
});

lazyloadImages.forEach(function(image) {
imageObserver.observe(image);
});
} else {
var lazyloadThrottleTimeout;
lazyloadImages = document.querySelectorAll(".lazy");

function lazyload () {
if(lazyloadThrottleTimeout) {
clearTimeout(lazyloadThrottleTimeout);
}

lazyloadThrottleTimeout = setTimeout(function() {
var scrollTop = window.pageYOffset;
lazyloadImages.forEach(function(img) {
if(img.offsetTop < (window.innerHeight + scrollTop)) {
img.src = img.dataset.src;
img.classList.remove('lazy');
}
});
if(lazyloadImages.length == 0) {
document.removeEventListener("scroll", lazyload);
window.removeEventListener("resize", lazyload);
window.removeEventListener("orientationChange", lazyload);
}
}, 20);
}

document.addEventListener("scroll", lazyload);
window.addEventListener("resize", lazyload);
window.addEventListener("orientationChange", lazyload);
}
})
</script>

Hi Patrick,

Yes, get the answer you are looking for by watching this YouTube video by Kevin Powell:
>> Lazy Loading Images is too easy now

Here is sample HTML code you can enter into the CK EDITOR Page Description:

<p><img loading="lazy" src="/prodimages/image-01.jpg" width="1200" height="675" alt="Describe what the photo is"></p>
<p><img loading="lazy" src="/prodimages/image-02.jpg" width="1200" height="675" alt="Tell Google about this image"></p>
<p><img loading="lazy" src="/prodimages/image-03.jpg" width="1200" height="675" alt="Another image description"></p>

Yes, CK EDITOR will jiggle those attributes around into a different order. But that will not matter. Try with FROALA; that should be fine as well.

Note that both Width and Height must be defined for this to work. And an Alt image description to keep Google happy.

You do not need any Javascript.

Here is a Test page to demonstrate Lazy Load Images

Regards, Gary


The dumb box of wires never wins

Thanks for the info Gary.

I have implemented it and all works fine.

The only thing I don't like about this version is it loads pictures way too early in my opinion.

I know it's based on connection speed and how the browser determines when to load them.

My other page where I use the Intersection Observer API to lazy load images only loads them when they just enter the bottom of the screen.

Either way.... it works.

Thanks,

Patrick