Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

FB plugin lazyloading #602

Open
hotelkar opened this issue Dec 1, 2023 · 0 comments
Open

FB plugin lazyloading #602

hotelkar opened this issue Dec 1, 2023 · 0 comments

Comments

@hotelkar
Copy link

hotelkar commented Dec 1, 2023

Hello Andrea,

Thanks for Vanilla! I'm using it successfully for images.

I have also been trying for weeks to lazily load a fb page plugin which is called in a

container.

 

The fb script is loaded with ..

<script async defer crossorigin="anonymous" src="https://connect.facebook.net/en_GB/sdk.js#xfbml=1&version=v18.0"></script>

An iframe document is being loaded which is not visible in viewsource.

<iframe name="f2e658665d5b6e8" width="499px" height="700px" data-testid="fb:page Facebook Social Plugin" title="fb:page Facebook Social Plugin" frameborder="0" allowtransparency="true" allowfullscreen="true" scrolling="no" allow="encrypted-media" loading="lazy" src="https://www.facebook.com/v18.0/plugins/page.php?adapt_container_width=true&app_id=&channel=https%3A%2F%2Fstaticxx.facebook.com%2Fx%2Fconnect%2Fxd_arbiter%2F%3Fversion%3D46%23cb%3Dfec8b444dc49f8%26domain%3Dxxxxxxxxxx%26is_canvas%3Dfalse%26origin%3Dhttps%253A%252F%252Fxxxxxxxxxxxx%252Ff3e2026770b0ce4%26relation%3Dparent.parent&container_width=458&height=700&hide_cover=false&href=https%3A%2F%2Fwww.facebook.com%2Fxxxxxxxx&lazy=true&locale=en_GB&sdk=joey&show_facepile=false&small_header=true&tabs=timeline&width=499" style="border: none; width: 458px; height: 700px; visibility: visible;" class=""></iframe>

The script is using native lazyloading but only the bootloader and a few images are loading lazily.
41 other videos and images are being preloaded.

I would like to load the plugin with a viewport threshold.
Is this possible? I tried many ways but none seem to work.
My programming skills are limited.

Any help in the right direction is appreciated.
Thanks

LazyLoad version

  • 17.8.5

Desktop

  • iOS
  • Chrome
  • Versie 119.0.6045.199 (Officiële build) (x86_64)
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

No branches or pull requests

1 participant