Support » Plugin: EWWW Image Optimizer » How to lazy load also offscreen images?

  • Resolved dwpro

    (@dwpro)


    Hi!
    Lazy loading images your extension does not load all images on a page, if they are offscreen.
    How can I force loading all images after page has loaded, even if they are offscreen?
    Thank you very much in advance for your very appreciated help!
    Kind regards,
    Gerald

    • This topic was modified 1 month, 3 weeks ago by dwpro.
Viewing 6 replies - 1 through 6 (of 6 total)
  • Plugin Author nosilver4u

    (@nosilver4u)

    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.

    Thread Starter dwpro

    (@dwpro)

    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

    Plugin Author nosilver4u

    (@nosilver4u)

    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…

    Thread Starter dwpro

    (@dwpro)

    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 1 month, 3 weeks ago by dwpro.
    • This reply was modified 1 month, 3 weeks ago by dwpro.
    • This reply was modified 1 month, 3 weeks ago by dwpro.
    Thread Starter dwpro

    (@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!

    Plugin Author nosilver4u

    (@nosilver4u)

    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

Viewing 6 replies - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.