Hey!
Sorry, but I do not understand the problem completly. Why are the images flickering? Could you post a URL to the site so I can take a look? Currently it is not possible to disable the styles, but if I get the problem, I can try to implement a solution 🙂
Cheers,
Florian
Thread Starter
zadine
(@zadine)
Thanks! I cannot see any flickering there – which images are affacted by this exactly, and which browser on which OS are you using?
Thread Starter
zadine
(@zadine)
Lazyload images flicker, but not everytime. Wonder if that style got something to do with it. What’s the function of it anyway?
Using OSX Sierra and chrome
The styles make, that the images with the lazyload class are only displayed if JavaScript is enabled. In the case of disabled JS, there is the noscript fallback and no need to display the img elements (which have no src attribute, when the image markup was modified by the plugin).
I will try to test it on OSX and Chrome tomorrow.
Okay, I think I found the problem. Your img element have a src attribute, and in some cases, when the inline script which adds the js class to the html element is not fast enough, you see the image from the src attribute, then the js class is added, the image’s opacity is set to 0, and then the lazy load script runs and the opacity is set back to 1 (that is the flickering).
Which plugin are you using for the content of the site? Maybe I can extend the plugin, so it modifies the images like it does for the normal content images (with a noscript fallback and without a src attribute for the iamge).
Thread Starter
zadine
(@zadine)
I’m using ACF for almost all content
Could you give that version from GitHub a try? https://github.com/florianbrinkmann/lazy-loading-responsive-images/tree/acf-support
It should filter the ACF fields before output and modify the image elements (and add the noscript fallback). With that, you also should not need to add the lazyload class by yourself.
Thread Starter
zadine
(@zadine)
Tried it, maybe better but not sure. Cant see <noscript>s.
Yes, does not look like the plugin modifies the image markup… What ACF field are you using, for example, to display the large background image on the front page?
Thread Starter
zadine
(@zadine)
ACF Image field, with Image ID for every image, except first large image is with featured image field.
-
This reply was modified 6 years, 6 months ago by
zadine.
Ah okay, so you build the image markup with wp_get_attachment_image() or similar inside the template file? In that case, this will not work (the plugin does not modify those images, because it cannot filter its HTML currently – maybe we get a fix for that: https://core.trac.wordpress.org/ticket/27399)… I think there is no perfect way to resolve that problem. The most perfect way for you would be to reproduce the markup with noscript, like showed here (without a src on the img which is not in the noscript element): https://github.com/aFarkas/lazysizes#the-noscript-pattern But in that case you would get problems if the plugin is able to filter the wp_get_attachment_image() in the future, because then there would be two noscript elements.
Another possibility would be to remove the transition from the image opacity, so the flickering will not be that noticeable…
Hi @zadine,
just wanted to let you know that version 3.3.0 adds the lazy_load_responsive_images_inline_styles filter for modifying/removing the inline styles.
Best,
Florian
