Support » Plugin: Native Lazyload » Images Disappear

  • Resolved Brad Griffin

    (@burlesonbrad)


    Like many others, I can’t really leave the site live in the current state of images that are gone. However, the same experience as others is happening here as well:

    https://woocamp.com

    Once I activate the plugin, all images disappear. Not one or two, but all of them that appear in the body content and featured image.

    Jetpack is active and “Enable Lazy Load” is enabled.
    The GutenBerries are all over the place.
    The Chrome is shiny and current.
    The WordsPressed is current & updated.
    AMP is running in ‘Standard’ Mode

    Now, like I mentioned, I can’t leave the site w/out images displaying. Consequently, I will be disabling this plugin as we look at this further.

    However, while the plugin was active and using some shiny Chrome inspector tools, we get this handy dandy error message:

    [Intervention] An <img> element was lazyloaded with loading=lazy, but had no dimensions specified. Specifying dimensions improves performance. See https://crbug.com/954323

    So, as we explore this further, where would one begin the diagnosing process?

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Solution _(as of this moment)_ :

    Jetpack Lazyload = OFF
    AMP toggled = “Traditional

    With the Native Lazyload plugin Active, no other settings appear to work except for the two mentioned above.

    I’d love to see this issue explored further since AMP AND Jetpack are some of the most used and common aspects of WordPress.

    Images on the home page of my site are pulled from featured images of the latest posts. These images disappear / do not show when LazyLoad is activated. They show again as soon as the plugin is deactivated. Theme is Typology; plugins include Autoptimize.

    • This reply was modified 2 months, 2 weeks ago by silverliebt.
    Plugin Author Felix Arntz

    (@flixos90)

    Like many others, I can’t really leave the site live in the current state of images that are gone. However, the same experience as others is happening here as well:

    https://woocamp.com

    Which browser did you encounter this on? It appears to work when I access the site in Chrome.

    Solution _(as of this moment)_ :

    Jetpack Lazyload = OFF
    AMP toggled = “Traditional”

    Potentially there is an incompatibility with Jetpack’s lazy-loading, would be interested to figure out what it is. But with this plugin, you wouldn’t need their lazy-loading anyway.
    I’m not sure how AMP is related, as this plugin doesn’t affect AMP content at all.

    Images on the home page of my site are pulled from featured images of the latest posts. These images disappear / do not show when LazyLoad is activated. They show again as soon as the plugin is deactivated. Theme is Typology; plugins include Autoptimize.

    Which browser do you encounter this in? Do you have JavaScript enabled/disabled? Can you share some HTML markup of these images please?

    Plugin Author Felix Arntz

    (@flixos90)

    Regarding Autoptimize, do you have the following option enabled?

    Force JavaScript in <head>?

    If so, that is what’s most likely causing the images to not appear. I opened https://github.com/GoogleChromeLabs/wp-native-lazyload/issues/6 to improve compatibility there.

    I do not have Force JavaScript in <head> checked in Autoptimize. Thank you for your response and action on the issue.

    Concerning Autoptimize: as a quick test you can disable AO on a per-request basis by adding ?ao_noptimize=1 to the URL.

    If your site works that way, then disable JS optimization for a second to see if that fixes it. If so keep an eye on your browser’s console for JS errors, as those will help you identify the problem.

    hope this helps,
    frank (ao dev)

    Plugin Author Felix Arntz

    (@flixos90)

    The 1.0.1 release I just pushed improves compatibility with certain scenarios possibly related to what you’re reporting. Let me know if your issue persists.

    I updated the WP plugin and Native Lazyload now works with Autoptimize. Images that previously did not show now show correctly.

    My only question is the code injection for images of a Native Lazyload placeholder SVG file, e.g.

    <img class="wp-image-8071 native-lazyload-js-fallback" src="https://mysite.org/wp-content/plugins/native-lazyload/assets/images/placeholder.svg"...>

    Could you explain the purpose of this placeholder svg?
    Admittedly, this should probably be in a new or different thread.

    @flixos90 As mentioned Chrome was current so that would mean that whatever the current version released at that time / date / moment was, then that’s the version of Chrome that was being used. There’s a big Green up arrow that shows up when Chrome needs to be updated. Mine was current.

    It appears to work when I access the site in Chrome.

    Well, uhm that might probably be due to the aforementioned sentence in which was stated:

    I can’t really leave the site live in the current state of images that are gone.

    : 🤦‍♀️🤦‍♂️ I disabled your plugin immediately upon noticing that the images had all disappeared 👍

    Closing this thread so I can reach inbox zero 🏆 Feel free to make a new thread for new topics.

    Bottom line: Don’t use Jetpack Lazy Load with this plugin.

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