滚动后是否再次停止加载iframe？

Question

I have a page with an iframe... Currently i used this code to load 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'/>

But when I scroll again even if only slightly, the iframe is re-loaded again. Can anyone help me to create iframe is not loaded again after i scroll for the second time? Thank you!

DEMO: http://design-jarwo.blogspot.co.id/ and i'll use it on my blog www.kodejarwo.com

Answer 1

You must remove the scroll event listener after firing it:

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