向下滚动时加载 iframe答案

【问题标题】：load iframe on scroll down向下滚动时加载 iframe
【发布时间】：2016-09-25 13:11:39
【问题描述】：

我有一个带有 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 像素）

谁能帮我解决这个问题...

谢谢

【问题讨论】：

标签： javascript jquery html iframe

【解决方案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;
        }
    }
});

【讨论】：

我已经更新了我的答案，请检查它以获得更多优化

【解决方案2】：

这个想法是在每次用户滚动页面时为窗口对象上调度的滚动事件添加一个回调。如果 iframe 尚未加载且滚动值高于 500 像素，则此回调用于加载 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);
})();

【讨论】：