Comments (21)
Well, I'm not sure what could be causing this behaviour and I don't seem to be able to reproduce this.
Looking at the highlighted area in the second picture, there is actually not an issue with the wyl-lazy CSS class. That one is only applied to the elements not above the fold. While the user scrolls and that area reaches above the fold, the class gets removed (as it seems to be in that picture as well), leaving the actual thumbnail visible instead.
Let me know if the user is able to reproduce the issue and explain the steps required for that.
from wp-youtube-lyte.
I've asked keengamer to join this conversation :)
from wp-youtube-lyte.
Hi this is KeenGamer, different account.
Well, I can just provide as much info as I can. I'm not sure how this add_filter( 'lyte_use_internal_lazyloader', '__return_true'); works for your plugin (feature) but if it's in our functions then it makes the issues as described above. Right now we do not have the staging site, it needs to be redone at the moment.
Also we just switched to the default settings with Lyte plugin to use the local cache and the image size is below 20 Kb so it doesn't ring any issues even for google fortunately. And I don't want to test it more because that would mean deleting the cache and for our 10k posts it's just timeconsuming to resave it again.
But, we use also WP Rocket with this settings https://prnt.sc/268ohtl Could be a conflict with this? Plus we have also Cloudflare's APO https://blog.cloudflare.com/automatic-platform-optimizations-starting-with-wordpress/ which saves on the edge the whole HTML etc. But this should not affect the lazyload in my opinion.
Also, if you go first to the desktop version of the page (not visited before so no cache is used, not even from Lyte plugin), the image is loaded fine. And if you go afterwards to the mobile version, the image is also loaded fine. However, if you visit the page FIRST using mobile then the image is not there. If you switch to desktop, reload, the image is there and afterwards it's also there for the mobile version. So it seems like there must be some conflict or a small bug just for the mobile view and it's caching, lazyloading.
Hope this helps :-).
from wp-youtube-lyte.
Hi,
Can confirm, I am having the same exact issue and not using WP rocket or Cloudflare.
background: none forces a blank image.
from wp-youtube-lyte.
and you're also using the new lazyload functionality (by using the filter) @believableUN ?
do you have a stagingsite where you could leave this active for @softmanro and me to see?
from wp-youtube-lyte.
Yes, I am using the lyte_use_internal_lazyloader filter.
Thanks
from wp-youtube-lyte.
@believableUN I've managed to reproduce this using the link that you provided. It looks like the javascript which should remove the wyl-lazy class fails to run (or do its work). I need to understand why that happens. @futtta any idea what could be triggering this?
Here is how the code looks like when showing blank instead of image:
from wp-youtube-lyte.
@softmanro could the problem be that DomContentLoaded (the event you hook into) has already fired when the JS (due to it being async) is executed? maybe we need some test/ fallback there?
from wp-youtube-lyte.
Yes, that's it. Due to the scripts being loaded asynchronous, the DOMContentLoaded fires sometimes before we can hook on to it.
A possible work-around would be to hook to window load event, what do you think @futtta?
from wp-youtube-lyte.
We could also set the lazyload script to be defer instead of async and keep the DOMContentLoaded hook, which should also work. I'm not sure what the best option would be, so looking forward to other points of view.
from wp-youtube-lyte.
that might work, as deferred scripts execute (just) before DCL?
from wp-youtube-lyte.
Yes, that is accurate. The only issue would be if some other plugin messes with defer attribute from the script.
I've tested both the window load event and the defer approach and the results are positive, but I'm not sure which one to pick in order to cover the most comprehensive user base.
from wp-youtube-lyte.
I'm not sure about the defer version. There is a lot of caching plugins which work and have defer (delay) javascript features. We have also DOM and the HTML doc loaded really fast from Cloudflare APO cache. But if you manage to run it AFTER the DOM and the HTML is loaded I would prefer this. I can test it because we use a lot of optimization features and plugins to speed up our site...
from wp-youtube-lyte.
I choose to keep async
and switch the hooked event from domContentLoaded
to load
as a test, just committed the change here, could you test @Stirius & @believableUN ? Download https://github.com/futtta/wp-youtube-lyte/archive/refs/heads/main.zip and install instead of "normal" version.
from wp-youtube-lyte.
Hm, so far so good. But would be good to change the version number to be able to see which one is activated. Also you cannot have "main" as the folder name. The cache files and php is not using that path...
from wp-youtube-lyte.
from wp-youtube-lyte.
Alright. It works for me so if @believableUN will confirm it as well then you can push it live in my opinion...
from wp-youtube-lyte.
Working good now, thanks a lot!
from wp-youtube-lyte.
Thanks for bringing this issue up @believableUN, @Stirius and for validating the fix.
from wp-youtube-lyte.
Thanks indeed everyone, I'll probably push out an official update this weekend! :)
from wp-youtube-lyte.
couldn't wait, just pushed out the release :)
from wp-youtube-lyte.
Related Issues (20)
- lyteThumbs.php; limit requests? HOT 1
- review (remove) deprecated params?
- .hidden should be .lyte .hidden?
- make notice about YT API dismissable HOT 1
- dash -> double issues? HOT 2
- Alignment options from Gutenberg and "Additional CSS classes" are ignored HOT 11
- support end parameter
- add title to noscript image?
- Remove inline fixed widths HOT 3
- Thumbnail Cache dir is not created automatically anymore HOT 3
- Your API key might be OK, but the API call did not succeed or the response was not entirely expected. Technical error: forbidden HOT 1
- double dash in code blocks replaced by unicode dash HOT 1
- Short urls in Elementor don't work HOT 7
- Save video thumbnails in webP format? HOT 4
- Support for "shorts" YouTube video format HOT 13
- Regex misses figcaption HOT 2
- youtube live stream url breaks
- Allow use of youtube-nocookie.com domain optional HOT 1
- Dismiss API key notification HOT 2
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from wp-youtube-lyte.