iframes

External scripts from iframes are executes on load by the browsers. This happens even tough the iframes has the loading attribute set to lazy. This small function allow to really lazy-load iFrames by replacing a div tag by an iframe tag when element is close to viewport.

Installation

Import and run the function in your project

import { fnLazyloadIframes } from "@overdog/fn"

fnLazyloadIframes()

Example

The data prefix on the content div attributes is only to keep valid HTML.

<div data-lazy-iframe="wrapper">
   <lazy-iframe 
      src="https://player.vimeo.com/video/{{ idField }}" 
      width="100%" 
      height="100%" 
      frameborder="0"
      title="Your title" 
      allowfullscreen
   >
   </lazy-iframe>
</div>