向下滚动加载iframe

load iframe on scroll down

本文关键字：iframe 加载 滚动      更新时间：2023-09-26

我有一个页面与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)

谁能告诉我怎么做这个?

谢谢

试试这个:

$(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;
        }
    }
});

这个想法是为每次用户滚动页面时在窗口对象上分配的滚动事件添加一个回调。这个回调函数是用来加载iframe，如果它还没有加载，如果滚动值大于500px。

(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);
})();
相关文章：