Lazy loading images not visible

  • I was debugging a friend’s site and found that lazy-loaded images were not visible on the page. With the web inspector, I saw they had opacity: 0 in the theme stylesheet.

    Inspecting frontend.js, I noticed this function:
    75 /* Animate images with [loading=”lazy”] attribute */
    76 function cryoutAnimateLazyImages() {
    77 jQuery( “#content img[loading=’lazy’]” ).on(‘load’, function(){
    78 jQuery(this).addClass(‘animate-lazy’);
    79 });
    80 }

    I added some debug logging and the load event was not firing. Installing the jQuery migrate helper seems to have fixed this. Do you need to change some things for WP 5.6?

Viewing 5 replies - 1 through 5 (of 5 total)
  • Theme Author CryoutCreations

    (@cryout-creations)

    Hi,

    We’ve updated the theme and the lazy loaded images should load fine.

    Thanks for the feedback!

    Thread Starter Paul Schreiber

    (@paulschreiber)

    This is still not working for me.

    See https://olivoilrecords.com/archives/ for an example.

    (You can load https://olivoilrecords.com/archives/?concat-js=0 to disable JS concatenation, but that has no effect.)

    cryoutAnimateLazyImages() fires, but jQuery(this).addClass(‘animate-lazy’); does not.

    Theme Author CryoutCreations

    (@cryout-creations)

    You seem to have a minification plugin installed. Please try disabling it and try without it. The lazy animations are working for us on all themes. See the Bravada demo as well: https://demos.cryoutcreations.eu/wp/bravada/

    Thread Starter Paul Schreiber

    (@paulschreiber)

    Your code should be able to work, even with concatenation.

    See https://stackoverflow.com/questions/3588102/jquery-load-not-working-on-my-image for more info on your bug.

    Here’s the fix:

    function cryoutAnimateLazyImages() {
        jQuery( "#content img[loading='lazy']" ).on('load', function(){
                jQuery(this).addClass('animate-lazy');
        }).each(function() {
                if (this.complete) {
                        jQuery(this).trigger('load');
                }
        });
}

    Also: your code doesn’t confirm to WordPress’ JavaScript coding standards. The spacing and indentation is incorrect and inconsistent. I recommend making eslint (with the appropriate rule set) part of your build process.

    Theme Author CryoutCreations

    (@cryout-creations)

    Hi Paul,

    (You can load https://olivoilrecords.com/archives/?concat-js=0 to disable JS concatenation, but that has no effect.)

    Sorry, somehow I missed this part when I first read your message, so I see now that my reply was pretty useless. Of course it must work with concatenation as well; the problem was that I couldn’t reproduce the issue on my test sites at all. Browsers seem to behave differently on how and when they load cached images as well (I was testing on Firefox and everything worked fine but I do see the issues on Chrome now).

    Anyway, the image complete property fix seems to be working great, I’ll test it some more and it will be included in today’s update.

    P.S. The code has been worked on by different people at different times so yeah, it’s inconsistent, but I don’t think it’s incorrect. However eslint seems like the right tool for the job. So thanks!

    Have a great day!

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘Lazy loading images not visible’ is closed to new replies.