Breaks images… in Chrome

  • Seems to work in IE, Edge, and Firefox… but not Chrome. Some images on my site refuse to load it the plugin is active. as soon as it is disabled, it works again.

    That’s pretty funny.

    • This topic was modified 5 years, 2 months ago by opus13i.
Viewing 10 replies - 1 through 10 (of 10 total)
  • Plugin Author Felix Arntz

    (@flixos90)

    Thanks for the review. I’d like to figure out your issue and fix it. Can you share some more context?

    Can share the HTML markup of the page, with the plugin active? Also, when the plugin is active and you open the browser console (right-click anywhere in the page > “Inspect” > “Console”), do you see any errors? Do you have any other lazy-loading solutions running?

    • This reply was modified 5 years, 2 months ago by Felix Arntz.
    Thread Starter opus13i

    (@opus13i)

    No other lazy loaders, but i do have Autoptimize in use.

    This is the image that does not load

    <img src="https://www.ultradeluxxe.com/wp-content/plugins/native-lazyload/assets/images/placeholder.svg" data-recalc-dims="1" class="jetpack-lazy-image lazy jetpack-lazy-image--handled" loading="lazy" data-src="https://i1.wp.com/www.ultradeluxxe.com/wp-content/uploads/2019/03/ultradeluxxe-premier-gaming-.jpg?w=1080&ssl=1" data-srcset="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7" data-lazy-loaded="1" sizes="(max-width: 516px) 100vw, 516px">

    No errors in the console, and no misses in the network tab.

    Edit: If i disable the Jetpack CDN tool and leave Lazyload active, then none of the images work. If i then disable Lazyload, then everything works fine.

    • This reply was modified 5 years, 2 months ago by opus13i.
    Plugin Author Felix Arntz

    (@flixos90)

    No other lazy loaders, but i do have Autoptimize in use.

    Potentially Autoptimize messes up the script included by the Native Lazyload plugin. Do you find ‘loading’ in HTMLImageElement.prototype anywhere in your page’s HTML output? Can you share some more of the surrounding markup?

    pro-tip; you can disable Autoptimize on a per-request basis by adding ?ao_noptimize=1 to the URL.

    if the problem is not there at that point, some autoptimize (re-)configuration might be needed to fix this. there are troubleshooting tips and info on how to exclude in the AO FAQ.

    hope this helps debugging,
    frank (ao dev)

    Plugin Author Felix Arntz

    (@flixos90)

    Do you have the following Autoptimize 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.

    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 (particularly Autoptimize). Let me know if your issue persists.

    Thread Starter opus13i

    (@opus13i)

    I did have that option flagged in AO, and have now disabled it.

    Interestingly, after upgrading to 1.0.1: No browser does any lazy loading with the site anymore.

    • This reply was modified 5 years, 2 months ago by opus13i.

    Having exactly the same issue. Worked fine, until today. No images in any browser, even on desktop.

    The img src attribute is referencing the placeholder image.

    <img src="https://xxxxxxxxxx.be/wp-content/plugins/native-lazyload/assets/images/placeholder.svg" loading="lazy" class="native-lazyload-js-fallback" data-src="https://xxxxxxxxxx.be/wp-content/uploads/2019/09/yyyyyyyyy.jpg" data-srcset="https://xxxxxxxxxx.be/wp-content/uploads/2019/09/yyyyyyyyy.jpg 650w, https://xxxxxxxxxx.be/wp-content/uploads/2019/09/yyyyyyyyy-480x320.jpg 480w" data-sizes="((min-width: 0px) and (max-width: 480px)) 480px, (min-width: 481px) 650px, 100vw">

    Deactivating the plugin magically brings back all images

    Plugin Author Felix Arntz

    (@flixos90)

    Thanks @kristoff-henry. The markup you shared actually looks correct on pageload, but there should be JavaScript code in the page too that would replace the placeholder src attributes with the original images from the data-src attributes. Can you check whether that JavaScript snippet is there? Do you see any JavaScript console errors that may cause it to break?

    As a temporary workaround, you could try to entirely disable the JavaScript fallback and see if it works then (which would however mean images are only lazy-loaded when the browser supports it). You could add this line of code somewhere:

    add_filter( 'native_lazyload_fallback_script_enabled', '__return_false' );

    • This reply was modified 5 years, 2 months ago by Felix Arntz.

    Stopping by to report there still seems to be an issue with Firefox and Autoptimize+Native Lazyload. Is there a specific javascript / source file we should be filtering out from Autoptimize? When I disable it things seem to work well, when activated things work fine until I end up toward the bottom of a page with comments, then all the images disappear. No console errors during testing. Thanks!

Viewing 10 replies - 1 through 10 (of 10 total)
  • The topic ‘Breaks images… in Chrome’ is closed to new replies.

Tags