Can you share some context about your environment? What browser are you using? Do you have JavaScript disabled?
The CSS rule you’re referring to is intended to only apply in scenarios where JavaScript is disabled. The images relying on JavaScript are then hidden because in favor of the alternate images provided in a noscript tag.
Chrome 76 on Mac using WordPress Unit Test theme data. JavaScript is activated, although this shouldn’t need JavaScript, should it, if the feature is supported natively?
> JavaScript is activated, although this shouldn’t need JavaScript, should it, if the feature is supported natively?
It doesn’t, I was just asking to get some context on what might be going wrong there. In order to make the fallback work, you need JavaScript. But if your browser supports the loading attribute, JavaScript is not needed.
I’m not sure how to replicate this issue at the moment. You don’t happen to have this site available online somewhere so I can look at the HTML source code?
You don’t happen to have this site available online somewhere so I can look at the HTML source code?
Temporarily at https://gist.github.com/markhowellsmead/5de73267983e967e85990b7fd797429b
I have same issue. Some images doesn’t appear
@markhowellsmead Looking at the source code, I’m curious whether the no-js class on the html element is replaced with js at all (I don’t see any JavaScript code doing that in the source code). Can you verify that that is happening?
That likely indicates something in your theme is broken. The only reason a no-js class exists is to replace it with js as soon as it’s clear that JavaScript is enabled. The theme should include something like https://github.com/WordPress/twentyseventeen/blob/master/functions.php#L240
I opened an issue https://github.com/GoogleChromeLabs/wp-native-lazyload/issues/4 to cater for scenarios like yours, but just so you’re aware I believe this is unexpected.
-
This reply was modified 4 years, 7 months ago by
Felix Arntz.
The theme (Davis, by Andres Norén) sets the class name but never removes it.
I’ve tested the page with Twenty Nineteen and JavaScript turned off, and all images (from the NOSCRIPT tags) are loaded immediately (even if they’re several thousand pixels down the page).
The theme (Davis, by Andres Norén) sets the class name but never removes it.
You may wanna report this as a bug.
I’ve tested the page with Twenty Nineteen and JavaScript turned off, and all images (from the NOSCRIPT tags) are loaded immediately (even if they’re several thousand pixels down the page).
This may not be an error actually. Since the native loading implementation wants to ensure it improves performance while not harming UX in any way, the threshold is initially very conservative, to reduce the chance of an image not being loaded when it becomes user-visible (see https://web.dev/native-lazy-loading#load-in-distance-threshold). Do the image tags in the noscript tags have loading attributes as expected?
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.
Thanks Felix. The images are now displayed. With JavaScript deactivated, all images are natively lazy loaded as expected. (When they approach the viewport on scrolling.) However, with JavaScript active, all images are loaded immediately, which negates the point of the feature.
I’ve tested the page with Twenty Nineteen and JavaScript turned off, and all images (from the NOSCRIPT tags) are loaded immediately (even if they’re several thousand pixels down the page).
I tried the same and had the same outcome, I also tried throttling the connection in chrome but all of the images still loaded. Static HTML pages loaded in WordPress seem to work.
