向下滚动加载 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（距顶部 500 像素）

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

谢谢

Answer 1

试试这个：

$(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 = false;
$(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

这个想法是在用户每次滚动页面时向在 window 对象上调度的 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);
})();