Images disappear when lazy loading is turned ON

Images disappear when lazy loading is turned ON. Can you help me with it?

  • Van Cameron
    • WPMU DEV Initiate

    I believe it’s an issue with a mu-plugin a colleague of yours advised us to install a couple of weeks ago. Our featured images were not showing at the correct size (poor resolution) on non-retina screens so we were advised to add this code to a mu-plugin folder:

    <?php

    add_action( ‘wp_footer’, ‘fix_header_image’ );

    function fix_header_image() {

    ?>

    <script type=”text/javascript”>

    jQuery(document).ready(function() {

    jQuery( “.entry-header img” ).removeAttr(“data-srcset”:wink:;

    jQuery( “.entry-header img” ).removeAttr(“srcset”:wink:;

    jQuery( “.entry-header img” ).removeAttr(“data-src”:wink:;

    });

    </script>

    <?php

    }

    When I remove this and tested the site with Lazy load on it works but I still have the resolution error on the featured images. I have reinstated the featured image mu-plugin fix and disabled lazy load.

  • Patrick Freitas
    • Staff

    Hi Van Cameron

    Hope you are doing well.

    The MU plugin will remove important parts of <img> tag attributes, however, I suggest we add those images on the exclusion list for Lazy Load, then we can keep the mu plugin and images loading fine.

    You can use the class .card-img-top on Lazy Load Settings

    Once added, the class the images will load fine.

    Let us know if you need further help on this.

    Best Regards

    Patrick Freitas

  • Van Cameron
    • WPMU DEV Initiate

    Hi. I am still experiencing a problem on Safari and iOS whereby when visiting the site for the first time the hero (featured) images don’t load on the homepage and all other pages. If I reload the page it then appears. If I clear browser cache and revisit the site it disappears. Could you please advise?

  • Aditya
    • Staff

    Hi Van Cameron

    Hope you are doing great. :slight_smile:

    I just checked your site and i was able to replicate it on my side, i then cleared the Hummingbird page cache which seem to have fixed the issue. Can you crosscheck once again and let us know if you still face the issue?

    Best,

    Aditya Shah

  • Van Cameron
    • WPMU DEV Initiate

    Hi,

    Thanks for getting back to me. I am afraid it’s not worked. When I went to the site on Safari and my iPhone the hero (featured image) still didn’t load on the first visit. If I refresh the page it then loads but I cannot expect the visitors to know they need to refresh the page to see images.

    Kind regards

  • Patrick Freitas
    • Staff

    Hi Van Cameron

    Hope you are doing great.

    Sorry for the delay here, I added the hero image on the exclusion list of Lazy Load too. It will avoid your image not loading on Safari, the issue seems to be intermittent, flushing cache and loading on the first time the image loads correctly, but as soon I close my Safari and open it again, the issue returns.

    I will be escalating this ticket to our Second Line Support for a close investigation.

    Note, the Second Line Support deal with a more complex situation and it can cause a delay in response depending on the complexity of the issue.

    Thank you for understanding,

    Best Regards

    Patrick Freitas

  • Van Cameron
    • WPMU DEV Initiate

    Hi

    I was just chasing this up as everything has gone quiet.

    Having disabled the lazy load we are still experiencing the problem. We notice it is happening on Firefox and Safari. I noticed an error in the console of those particular browsers as per below (not sure if these are of use?)

    Safari:

    Failed to load resource: the server responded with a status of 404 (Not Found)

    https://www.welbeing.org.uk/wp-content/uploads/hummingbird-assets/tp.widget.bootstrap.min.js.map

    Firefox:

    Source map error: request failed with status 404

    Resource URL: https://www.welbeing.org.uk/wp-content/uploads/hummingbird-assets/4a51bf5c0d6ad61a2ce30de8fd00f3ad.js

    Source Map URL: tp.widget.bootstrap.min.js.map

  • Alessandro
    • Staff

    Hello Van, thanks for using Smush!

    I came up with a solution to your problem and there is a combination of things you have to do to make it work!

    Try to go to your Smush > Lazyload Settings, remove all classes under “Classes & IDs”, select method to load in “Footer”, rather than “Header” for better performance and save changes.

    Also, I would like to ask you to remove your custom plugin fix-header-image-resolution.php. Removing “data-srcset”, “srcset” and “data-src” disables lazyload itself and prevent your browser from getting the appropriate image sizes. (Keep a copy of the file for future reference)

    Finally, upload the following snippet as a plugin to your mu-plugins directory. It will fix the src media set to render correct images.

    You can download you plugin here:

    https://gist.github.com/wpmudev-sls/ad6f7eec12e2c43b8065a63c3ac43aff

    Clear cache if using any caching plugin and reload homepage. It should work as expected.

    I simulated the images on Safari’s first load, and everything seems to go smooth.

    If you encounter any problem, rollback the process by following the steps above in reverse order, and let us know about it.

    Kind regards,

    Alex.

Thank NAME, for their help.

Let NAME know exactly why they deserved these points.

Gift a custom amount of points.