javascript - 滚动后再次停止加载 iframe 吗？

Question

我有一个带有 iframe 的页面...目前我使用此代码来加载 iframe onscroll...

Javascript:

function lazyLoad() {
    for (var e = document.getElementsByClassName("lazy"), t = 0; t < e.length; t++) isInViewport(e[t]) && (e[t].src = e[t].getAttribute("data-src"))
      }
function isInViewport(e) {
    var t = e.getBoundingClientRect();
    return t.bottom >= 0 && t.right >= 0 && t.top <= (window.innerHeight || document.documentElement.clientHeight) && t.left <= (window.innerWidth || document.documentElement.clientWidth)
}
function registerListener(e, t) {
    window.addEventListener ? window.addEventListener(e, t) : window.attachEvent("on" + e, t)
}
registerListener("load", lazyLoad), registerListener("scroll", lazyLoad);

HTML:

<iframe data-src='http://some-link.com' src='' class='lazy'/>

但是当我再次滚动时，即使只是轻微滚动，iframe 也会再次重新加载。谁能帮助我创建 iframe 在我第二次滚动后不再加载？谢谢!

演示:http://design-jarwo.blogspot.co.id/我将在我的博客上使用它 www.kodejarwo.com

Answer 1

您必须在触发滚动事件监听器后将其删除:

function onScroll () {
    if (lazyLoad()) {
        window.removeEventListener('scroll', onScroll);
    }
}
function onLoad () {
    lazyLoad();
}
function lazyLoad() {
    var loaded = false;
    for (var e = document.getElementsByClassName("lazy"), t = 0; t < e.length; t++) {
        isInViewport(e[t]) && (e[t].src = e[t].getAttribute("data-src"));
        loaded = true;
    }
    return loaded;
}
function isInViewport(e) {
    var t = e.getBoundingClientRect();
    return t.bottom >= 0 && t.right >= 0 && t.top <= (window.innerHeight || document.documentElement.clientHeight) && t.left <= (window.innerWidth || document.documentElement.clientWidth)
}
function registerListener(e, t) {
    window.addEventListener ? window.addEventListener(e, t) : window.attachEvent("on" + e, t)
}
registerListener("load", onLoad), registerListener("scroll", onScroll);