Hopefully this helps with a Youtube iframe lazy load! You can find me on Twitter if you have any questions. This could also be used for any oembed item. It would be extremely nice to just be able to remove these two attributes but we don’t need to. Now the biggest issue with two of the attributes is the width and height that are causing all the issues. import = useIntersectionObserver(containerRef)Īnd there you are! A fully deferred iframe component to house YouTube videos. With The Youtube Embedded Iframe We can see there are a few attributes as follows: width, height, src and more. Using the hook is as simple as importing it from the package, and plugging it in. The thing I love most about hooks is that they are generally broken down into a single use, super easy to use function. Not wanting to re-invent the wheel I decided to use the useIntersectionObserver() hook provided by Jared Lunde from his brilliant React Hook package. I initially considered building out the whole intersection observer functionality myself, but when digging a bit deeper I found that there were a number of polyfills and other magic needed to support edge cases. The Intersection Observer API is often used to lazy load images, but it can also be used to load all manner of other things. Using the Intersection Observer API To Lazy Load Iframes We need to completely defer all YouTube related scripts loading until the user actually needs them. However the YouTube scripts for the player were still being loaded too soon causing a performance hit. I tried adding this and it increased performance slightly. This surprised me as Chrome has rolled out a lazy attribute that defers loading of offscreen Iframes and images until a user scrolls near them ( more information on that here). No suggestion or indication of lazy loading seems to be factored in. If you like it you can find more of his music on Spotify. This music video by Fwar, a good friend of mine.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |