负载的iframe下来

Question

我有一个网页的iframe ... 目前我用这个代码加载上点击iframe中..

这里是我的代码

$('.a').click(function(){ 
    var iframe = $("#b"); 
    iframe.attr("src", iframe.data("src")); 
}); 

HTML：

<button class='a'>Load</button> 
<iframe id='b' src='' data-src='index.php'></iframe> 

，但我也我要上滚动加载的iframe下降（从500px的顶部）

能有人p租赁帮助我如何我能做到这一点...

感谢

Answer 1

试试这个：

$(window).scroll(function() { 
    var height = $(window).scrollTop(); 
    if(height > 500) { 
     var iframe = $("#b"); 
     iframe.attr("src", iframe.data("src")); 
    } 
}); 

如果你想只装一个时间滚动后超过500 您可以添加标志和它等于在页面加载false，那么它是真的里面滚动事件，并检查该标志加载的iframe 实例之前：

var isLoaded = flase; 
$(window).scroll(function() { 
    var height = $(window).scrollTop(); 
    if(height > 500) { 
     if(!isLoaded){ 
      var iframe = $("#b"); 
      iframe.attr("src", iframe.data("src")); 
      isLoaded = true; 
     } 
    } 
}); 

Answer 2

这个想法是在每次用户滚动页面时在窗口对象上分派的滚动事件添加一个回调。如果尚未加载iframe，并且滚动值高于500px，则使用此回调加载iframe。

(function() { 
    var iframeLoaded = false; 
    function loadIframeOnScroll() { 
    if (window.scrollY >= 500 && !iframeLoaded) { 
     loadIframe(); 
    } 
    }; 

    function loadIframe() { 
    if (!iframeLoaded) { 
     var $iframe = $('#b'); 
     $iframe.attr('src', $iframe.data('src')); 
     window.removeEventListener('scroll', loadIframeOnScroll); 
     iframeLoaded = true; // could be placed in the onload callback of the iframe 
    } 
    } 

    window.addEventListener('scroll', loadIframeOnScroll); 
    document.querySelector('.a').addEventListener('click', loadIframe); 
})();