Doesn't Load Images Until Scroll

Yes, in your functions do this:

wp_dequeue_script('lazyload-call')

Then add this script to your template and adjust the threshold:

jQuery(function ($) {
    $("img.lazy").show().lazyload({
      threshold : 200, // control when it shows up.
      effect: "fadeIn"
     });
});

Refer to https://www.appelsiini.net/projects/lazyload as Trigger Loading might be something better suited for you.

Remember though, it still has to actually “load” the image and will use the placeholder until the image is rendered. Larger images may take longer times to load. I would recommend you use caching.

I tried the above, still the same issue no matter what the threshold. The images are small (95% are under 20kb), so they take no time to load. No product images show unless I scroll at least 1px.

Here’s what I did:

add_action( 'wp_print_scripts', 'lazyload_dequeue' );
function lazyload_dequeue(){
	wp_dequeue_script('lazyload-call');
}

add_action( 'wp_footer', 'lazyload_recall');

function lazyload_recall(){
	echo "<script>jQuery(function ($) {
    $('img.lazy').show().lazyload({
      threshold : 200, // control when it shows up.
      effect: 'fadeIn'
     });
});</script>";
}

So I found a hacky workaround to scroll the page 1px on load: I added the following before $img.lazy…

$(window).scrollTop($(window).scrollTop()+1);

perhaps not the best way around, but it gets the job done.