Above The Fold, Query Loop Block (Dynamic) Images Do Not Load Even On Scroll

  • I use Query Loop Block to display a dynamic grid of posts on my Blog Page. Any image which is positioned ‘above the fold’ fails to load when A3 Lazy Load is activated.

    When working with non-dynamic ‘above the fold’ images, I simply apply the class ‘skip-lazy’. This works successfully. The same strategy cannot be applied to images within the Query Loop Block because any class applied to one image will propagate to every other image of the same kind

    • Example: Applying ‘skip-lazy’ to the Featured Image of the first post displayed by Query Loop will apply the same class of ‘skip-lazy’ to the Featured Images of all posts within the same Query Loop Block (thus defeating the benefit of lazy-loading altogether).

    I have also tried targeting ‘above the fold’ images using a jQuery script to apply the class ‘skip-lazy’ only to the very first image within the Query Loop. This succeeds in adding the class ‘skip-lazy’ to the Query’s first image, but the image still never loads.

    <script>
jQuery( document ).ready(function() {
	jQuery('.wp-block-post-content').find('img:first').addClass( "skip-lazy" );
});
</script>

    Do you have insights to share? Can you recommend a working solution?

    Thank you for your consideration and for your thoughtful reply.

  • The topic ‘Above The Fold, Query Loop Block (Dynamic) Images Do Not Load Even On Scroll’ is closed to new replies.