I've updated the code based on the suggestions in comments and answers.
shout out to Sᴀᴍ Onᴇᴌᴀ for his suggestions in the accepted answer and David Knipe for suggestions on the throttle function.
const w = window;
const d = document;
let timeout;
const throttle = (fn, ...args) => (
timeout && w.cancelAnimationFrame(timeout),
(timeout = w.requestAnimationFrame(_ => fn(...args))));
const loadFrame = _ =>
d.querySelectorAll("iframe").forEach(frame => {
if (frame.src) return
const frameRect = frame.parentElement.getBoundingClientRect();
(w.pageYOffset + d.documentElement.clientHeight >= frameRect.y
&& frameRect.y + frameRect.height >= w.pageYOffset)
&& frame.setAttribute('src', frame.getAttribute("data-src"))
.removeAttribute("data-src")});
d.addEventListener("DOMContentLoaded", loadFrame, false);
w.addEventListener("scroll", _ => throttle(loadFrame), false);
I've updated the code based on the suggestions in comments and answers.
shout out to Sᴀᴍ Onᴇᴌᴀ for his suggestions in the accepted answer and David Knipe for suggestions on the throttle function.
const w = window;
const d = document;
let timeout;
const throttle = (fn, ...args) => (
timeout && w.cancelAnimationFrame(timeout),
(timeout = w.requestAnimationFrame(_ => fn(...args))));
const loadFrame = _ =>
d.querySelectorAll("iframe").forEach(frame => {
if (frame.src) return
const frameRect = frame.parentElement.getBoundingClientRect();
(w.pageYOffset + d.documentElement.clientHeight >= frameRect.y
&& frameRect.y + frameRect.height >= w.pageYOffset)
&& frame.setAttribute('src', frame.getAttribute("data-src"))
.removeAttribute("data-src")});
d.addEventListener("DOMContentLoaded", loadFrame, false);
w.addEventListener("scroll", _ => throttle(loadFrame), false);
I've updated the code based on the suggestions in comments and answers.
shout out to Sᴀᴍ Onᴇᴌᴀ for his suggestions in the accepted answer and David Knipe for suggestions on the throttle function.
const w = window;
const d = document;
let timeout;
const throttle = (fn, ...args) => (
timeout && w.cancelAnimationFrame(timeout),
timeout = w.requestAnimationFrame(_ => fn(...args)));
const loadFrame = _ =>
d.querySelectorAll("iframe").forEach(frame => {
if (frame.src) return
const frameRect = frame.parentElement.getBoundingClientRect();
(w.pageYOffset + d.documentElement.clientHeight >= frameRect.y
&& frameRect.y + frameRect.height >= w.pageYOffset)
&& frame.setAttribute('src', frame.getAttribute("data-src"))
.removeAttribute("data-src")});
d.addEventListener("DOMContentLoaded", loadFrame, false);
w.addEventListener("scroll", _ => throttle(loadFrame), false);
I've updated the code based on the suggestions in comments and answers.
shout out to Sᴀᴍ Onᴇᴌᴀ for his suggestions in the accepted answer and David Knipe for suggestions on the throttle function.
const w = window;
const d = document;
let timeout;
const throttle = (fn, ...args) => (
timeout && w.cancelAnimationFrame(timeout),
(timeout = w.requestAnimationFrame(_ => fn(...args)))
);
const loadFrame = _ =>
d.querySelectorAll("iframe").forEach(frame => {
if (frame.src) return
const frameRect = frame.parentElement.getBoundingClientRect();
(w.pageYOffset + d.documentElement.clientHeight >= frameRect.y
&& frameRect.y + frameRect.height >= w.pageYOffset)
&& frame.setAttribute('src', frame.getAttribute("data-src"))
.removeAttribute("data-src")
});
d.addEventListener("DOMContentLoaded", loadFrame, false);
w.addEventListener("scroll", _ => throttle(loadFrame), false);