How to lazy load also offscreen images?

The EWWW IO plugin will load any images that are within 500-1000 pixels of the viewport, but no it doesn’t load ALL the images lazily. We use the lazysizes library though, and I think they have a way to trigger a load of all images, so I’d check the GitHub page for lazysizes to see what you can find.

Hi!
Thank you for replying.
I simply added this script to the page now:

// Lazy load also offscreen images
setTimeout(function(){
	$("img.lazyload").each(function () {
		$(this).attr("src",$(this).attr("data-src"));
		$(this).removeClass("lazyload").addClass("lazyloaded");
	});
}, 1);
// -----

Is there anything against it?
Kind regards, Gerald

Well, if you’re not using the auto-scaling function, and you already have jQuery on your page, that would work. You’re already doing something I would never recommend, so why not…

Hi!
I do want to use the auto-scaling function.
The reason for “manually” loading also affscreen images is:
The page should load quickly loading just the images necessary, and when the user scrolls to the images out of initial viewport area, the images should have loaded already. What other method would you recommend to achieve that?

• This reply was modified 3 years, 5 months ago by dwpro.
• This reply was modified 3 years, 5 months ago by dwpro.
• This reply was modified 3 years, 5 months ago by dwpro.

Hi again!
I found a solution using a native lazyload functionality:
Adding the class ‘lazypreload’ to the images is lazy pre-loading them after onload.
So no JS needed for that.
Thank you for taking time!

Ah, that’s much cleaner! That said, we already use a larger viewport threshold to load images that are about 1000px from the screen. This generally is good enough to prevent folks missing images while they scroll, but you can also tweak the threshold manually by adding this to your wp-config.php:
define( ‘EIO_LL_THRESHOLD’, 2000 );
*of course you can set it as large as you want ??

More tweaks at https://docs.ewww.io/article/74-lazy-load