向下滚动加载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）

有人可以帮助我如何做到这一点......

谢谢

Answer 1

这个想法是每次用户滚动页面时为每个窗口对象上调度的scroll事件添加一个回调。如果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);
})();

Answer 2

试试这个：

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

如果您想在滚动超过500后仅加载一次 你可以在页面加载时添加标志并将其等于false然后在滚动事件中使其成为true并在加载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;
        }
    }
});