Skip to main content
ST FN

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

Add the data-lazy-iframe="wrapper" on a wrapper div.

<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>