Question

我们有一个CMS，它利用组件构造页面。每个组件都有内联脚本来触发XHR调用以基于个性化获取内容。在较高的层次上，CMS会生成如下结构

<html>
  <body>
    <!-- First component -->
    <div class='component container'>
        <script>
            //XHR Call gets personalized content
        </script>
        <div>Content placeholder</div>
    </div>
    <!-- Second component -->
    <div class='component container'>
        <script>
            //XHR Call gets personalized content
        </script>
        <div>Content placeholder</div>
    </div>
    <!-- Third component -->
    <div class='component container'>
        <script>
            //XHR Call gets personalized content
        </script>
        <div>Content placeholder</div>
    </div>
  <body>
<html>

从性能角度看，如何检查脚本的父div是否为above the fold，而没有插件，则在用户滚动时基于该触发器触发XHR调用。有一些jQuery Lazy之类的插件，但这可能需要在CMS中进行大量自定义。

Answer 1

从此答案开始：https://stackoverflow.com/a/3326554/2181514

您可以使用以下命令获取当前正在运行的脚本（在jquery中）的div：

var div = $('script').last().parent();

请注意：该文档不能在文档中。就绪（$(function() { ...）

如果您未在<head>中加载jquery，请使用上面链接中的答案中的vanilla javascrpt。

然后可以将div的位置与当前窗口的高度进行比较：

var div = $('script').last().parent();
if (div.position().top < $(window).height()) {
    // do something here
    $(function() { div.fadeIn(); });
}

问题是关于“在首屏上”找到一个脚本-但又在“用户滚动”时询问-这是两件事。如果您正在检查“当用户滚动时”，则无需知道哪个脚本是“当前”脚本，因为在用户滚动时这将是没有意义的。

在这种情况下，您需要在用户滚动（去抖动）时检查每个元素的位置。

检查div是否高于内联脚本中的折叠

1 个答案: