search

verlok / vanilla-lazyload

LazyLoad is a lightweight, flexible script that speeds up your website by deferring the loading of your below-the-fold images, backgrounds, videos, iframes and scripts to when they will enter the viewport. Written in plain "vanilla" JavaScript, it leverages IntersectionObserver, supports responsive images and enables native lazy loading.
https://www.andreaverlicchi.eu/vanilla-lazyload/
MIT License
7.7k stars 675 forks source link

Lazyload iFrame within a collapsed Boostrap element #465

Closed phylume closed 4 years ago

phylume commented 4 years ago

Perhaps similar to the Lazy load images inside a non visible container issue, I am trying to lazy load an iFrame, which will be hidden using a Bootstrap 4 collapsed <div>. I tried using the code from the example within the thread, but it didn't work for me when I used the latest Bootstrap 4 and LazyLoad script.

I am planning on having a webpage with about 25 iFrames collapsed behind their own individual "Expand" button. I'd like the iFrame to load after the user hits "Expand."

Any assistance with this request would be really appreciated.

verlok commented 4 years ago

Hey man,

as far as I know, if the bootstrap collapse turns the iframe’s container visible, the intersection observer (which is the technology at the base of vanilla-lazyload) should detect it and load it.

Can you report the HTML, CSS and JS code of what you are trying to do in a new Codepen so I can assist you?

Thanks

verlok commented 4 years ago

Hey @phylume , do you have any updates on this issue?

phylume commented 4 years ago

Hi @verlok ,

Sorry, I haven't had a moment to test this out. I will close this out and reopen this ticket (I think I can??) if it's still an issue. I really do appreciate your response.

Many thanks!

John