Question

我有一个滚动div，它可能包含一个或多个iframe，也可能不包含，但仅当父div的滚动区域的顶部和底部之间部分或全部可见iframe时，才应加载其内容。但是，当div中有iframe并在Chrome中检查我的网页时，我看到随着父div的滚动条向上或向下滚动，iframe的offsetTop值不会改变。另外，我看到iframe的offsetParent引用了body元素，而不是实际包含iframe的滚动div。

这是一个简单的网页，显示了我正在谈论的基本div和嵌套iframe结构：

<!DOCTYPE html>
<html>
  <body>
    <!-- Scrolling div -->
    <div id="scroller" style="height:316px; width: 322px; overflow-y:scroll;">
      <!-- 5 iframes that each contain an img tag that is ignored -->
      <iframe><img id="img" src="1.png"></iframe><br />
      <iframe><img id="img" src="2.png"></iframe><br />
      <iframe><img id="img" src="3.png"></iframe><br />
      <iframe><img id="img" src="4.png"></iframe><br />
      <iframe><img id="img" src="5.png"></iframe><br />
    </div>
    <script>
      //
      // Assign an onScroll function to the scroller div that monitors the div's
      // scrolling ...
      //

      function scrollerDivScrolling() {
        var div = scrollerDivScrolling.div;

        //
        // The following code only changes the div's background color when the
        // div's scroll-bar is scrolled: white when less-than or 50px or
        // yellow when more 50px.
        //

        if( div.scrollTop > 50 ) {
          div.style.backgroundColor = "yellow";
        }
        else {
          div.style.backgroundColor = "white";
        }

        //
        // This is code needs to check each of the iframe's position to
        // see if the iframe is displayed partially/fully between the
        // parent div's scroll area's top and bottom, and if so then the
        // iframe's content is set to the html statement(s) that are
        // between to iframe's opening and closing tags.  If the iframe's
        // position is either completely above top of the parent div's
        // scroll area or completely below the parent div's scroll area,
        // then remove the contents.
        //

      }
      scrollerDivScrolling.div          = document.getElementById( 'scroller' );
      scrollerDivScrolling.iframes      = scrollerDivScrolling.div.getElementsByTagName( 'iframe' );
      scrollerDivScrolling.div.onscroll = scrollerDivScrolling;

      // Initialize the iframes with in the scroller div to 'show' their contents ...

      for( var i = 0, iframes = scrollerDivScrolling.iframes, l = iframes.length, iframeDoc = null; i < l; ++i ) {

        iframeDoc = iframes[ i ].contentWindow.document;
        iframeDoc.open();
        iframeDoc.write('Test' + ( i + 1 ) );
        iframeDoc.close();

      }
    </script>
  </body>
</html>

如上面的代码所示，iframe实际上加载了“ Test”，后跟一个数字，而不是各个iframe标签中的图像标签语句，但这不是问题，因为我知道已经做到这一点。更重要的是，用于处理div滚动的scrollerDivScrolling（）函数实际上并不会根据其相对于父div滚动区域的顶部和底部的位置来更改每个iframe的内容，因为我还没有弄清楚每个iframe的哪些属性我需要使用的iframe。

Answer 1

我扩大了搜索范围，发现：Detect when elements within a scrollable div are out of view，将其与我的scrollerDivScrolling（）函数集成如下：

<script>
  const UNDEFINED = undefined;

  // Assign an onScroll function to the scroller div that monitors the div's scrolling ...

  function checkInView( elem, partial ) {
    var container  = $( '.scrollable' );
    var contHeight = container.height();
    var contTop    = container.scrollTop();
    var contBottom = contTop + contHeight - 1;
    var $elem      = $( elem );

    var elemTop    = $elem.offset().top - container.offset().top;
    var elemBottom = elemTop + $elem.height();

    var isTotal    = ( ( elemTop >= 0 ) && ( elemBottom <= contHeight ) );
    var isPart     = false;

    if( partial ) {
      isPart  = ( ( ( elemTop < 0 ) && ( elemBottom > 0 ) ) || ( ( elemTop > 0 ) && ( elemTop <= container.height() ) ) );
    }

    return ( isTotal || isPart );
  }

  function scrollerDivScrolling() {
    var div = scrollerDivScrolling.div;

    for( var i = 0, iframes = scrollerDivScrolling.iframes, l = iframes.length, iframeDoc = null; i < l; ++i ) {

      // If the element is in the scrollable div's visible area ...

      if( checkInView( scrollerDivScrolling.iframes[ i ], true ) ) {

        // If the element had not already been loaded ...

        if( ( iframes[ i ].loaded === UNDEFINED ) || !iframes[ i ].loaded ) {

          // Mark the element as loaded and load the element ...

          iframes[ i ].loaded = true;
          iframeDoc           = iframes[ i ].contentWindow.document;
          iframeDoc.open();
          iframeDoc.write( 'Test' + ( i + 1 ) + '&nbsp' + iframes[ i ].innerHTML );
          iframeDoc.close();

        }

      }
      else {

        // Mark the element as NOT loaded and unload the element ...

        iframes[ i ].loaded = false;
        iframeDoc           = iframes[ i ].contentWindow.document;
        iframeDoc.open();
        iframeDoc.write( '' );
        iframeDoc.close();

      }

    }

  }
  scrollerDivScrolling.div          = document.getElementById( 'scroller' );
  scrollerDivScrolling.div.onscroll = scrollerDivScrolling;
  scrollerDivScrolling.iframes      = scrollerDivScrolling.div.getElementsByTagName( 'iframe' );

  // Initialize the iframes with in the scroller div to 'show' their contents ...

  for( var i = 0, iframes = scrollerDivScrolling.iframes, l = iframes.length, iframeDoc = null; i < l; ++i ) {

    iframes[ i ].loaded = UNDEFINED;

  }

  scrollerDivScrolling();
</script>

对我来说，checkInView（...）函数显示当滚动条一直位于顶部时，前三个iframe元素处于“可见”状态，这意味着该函数对广告中的前三个元素返回true div，即使滚动div的高度仅高到足以显示前两个iframe元素，但这对我来说真的不是问题。

使用这项技术，我可以使用div滚动每个iframe进入视图时显示的html来“预加载” iframe，并且每个iframe中包含的img标签通常会在它们进入视图时加载它们的图像。

对我来说，这有两种帮助：初始页面加载不需要在查看页面之前加载所有iframe，并且用户可以开始滚动“行iframe”子页面，并且包含所有数据所需的全部存储量都被“平整了”，因为仅加载了显示元素所需的页面数据，并且移除了可滚动div中的隐藏行。当其内容替换为''。

以下是Pen演示，展示了其工作原理的工作示例：Scrolling Div of delay-loading iframes

如何确定子iframe元素何时位于滚动div的可见区域内？

1 个答案: