滚动后再次停止加载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不会再次加载后，我第二次滚动？谢谢！

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