Defer offscreen images
For Background Images
add the class defer-bg-image to the container, it could be the parent or the element with the bg image
This works by setting a background = none !important to the element and it’s children. Then using an Intersection observer it would remove that class so it will continue to load the assigned bg image.
The css and js is already in the bigdaddy template, but incase it is not on your project or is outdated, here are the codes:
CSS
body:not(.elementor-editor-active) .defer-bg-image div,
body:not(.elementor-editor-active) .defer-bg-image section,
body:not(.elementor-editor-active) .defer-bg-image {
background-image: none!important;
}
JS
function defer_bg_images(){
if( typeof IntersectionObserver === 'undefined' ) {
// Intersection observer not supported by browser, use fallback method
$('.defer-bg-image').removeClass('defer-bg-image');
return;
}
let items = document.querySelectorAll(".defer-bg-image");
if( !items ) return;
items.forEach((item) => {
item.io = new IntersectionObserver(
(entries) => {
entries.forEach((entry) => {
if ( !entry.isIntersecting ) return;
item.classList.remove('defer-bg-image');
item.io.unobserve(item);
});
},
{ threshold: 0, rootMargin: '100px' }
);
item.io.observe(item);
});
}
make sure the function is called https://prnt.sc/Y2Ylj9FumlVB
For image tags
just use the native browser attribute loading="lazy"