如何检测所有图片和元素都已经加载完毕，并且高度已经适当渲染。

Question

我如何使用jquery或vanilla js检查页面上的所有图像是否已加载，并且它们已呈现为其最终完整高度，以及它们的父元素是否已调整到该高度？

我正在使用jquery实现scrollspy功能-确定用户在页面上的位置并突出显示其在导航中的位置，随着滚动更新其位置。为了使其正常工作，我需要知道要监视的页面上每个部分的offset.top。如果我在所有图像加载并以其完整高度显示之前太早计算offset.top，则offset().top计算将不正确。我想避免过多运行offset().top计算。

我尝试过但不符合我的需求的方法： $(document).ready()和$(window).onload()都太早了，因为图像可能尚未呈现为其完整高度，因此使得部分未呈现为其完整高度。 imagesLoaded库。与上述问题相同，无法考虑图像呈现为其完整高度。

- gregnemes

---

我猜你的意思是 $(window).on("load"...。 - epascarello

你是动态加载内容还是所有内容都在页面从服务器请求时存在？ - epascarello

@epascarello，我一直在使用jQuery .load()事件，我认为它与你所说的是可以互换的。请原谅我的伪代码，因为我当时正在编写原始问题！ - gregnemes

@epascarello 我没有动态加载任何内容，一开始发送请求到服务器时就已经有了所有的内容。 - gregnemes

Answer 1

根据我的经验，我认为这并不是一件简单的事情。window.onload可能有所帮助，但当图像动态加载时，它并不可靠。过去，我使用某种方法来使其可行。基本上，我使用window.setInterval并通过查看属性naturalWidth（参见：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement）来检查图像是否真正可用。

以下是实现示例：https://jsfiddle.net/yu8zr20h/

- Cezary Tomczyk

Answer 2

你正在以错误的方式解决这个问题。你需要比较用户窗口当前的Y值和所有组件的Y值，或者至少是包含不同导航值的容器的Y值。

想象一下这是你的HTML代码：

<div id="firstContainer">
    <!-- Some content -->
</div>

<div id="secondContainer">
    <!-- Some other content -->
</div>

现在您可以使用以下代码相对于完整的HTML页面检查高度：

document.gelElementBtId('element-id').offsetTop

以及用户当前的高度：

scrollY

更多信息请参考JSFiddle。

- Titulum

---

我忘了提醒你，每次调用检查函数时都需要重新计算offsetTop值。因此，每次调用检查函数时，offsetTop值都是该时刻的正确值。 - Titulum

感谢您的回答！不幸的是，出于性能原因，我正在尝试避免每次调用函数时都需要重新计算offsetTop值的特定实现。计算offsetTop会触发该元素（如果不是整个页面）的重绘，而我已经在滚动时执行其他图形密集型操作。 - gregnemes

我不知道这个！你能给我指点一下关于这个的更多信息吗？ - Titulum

这篇文章是我第一次学习这个内容的地方。整篇文章都很好，但这是一个关于此主题的链接。每当你在JavaScript中请求一个元素的offsetTop属性时，你立即给浏览器带来了很多工作，因为它现在必须去布局页面，以便能够给你正确的答案。这个过程被称为回流。如果我们根据offsetTop值改变元素的另一个属性，那么元素（以及其合成器层）将需要重新绘制，这可能是昂贵的。 - gregnemes

在我的先前评论中，我指的是“重新布局（reflow）”，而不是“重绘（repaint）”。 - gregnemes

Answer 3

如果您有图像大小元数据（例如，Rails Active Storage可以直接提供），则可以将高度写入数据集：

 <img id="image" data-height="700" src="image.jpg" />

然后等待它被渲染（观察自然高度）：

let timer;
let image = document.getElementById("image");
function waitImage() {
    if (image.naturalHeight < image.dataset.height) {
        timer = setTimeout(function(){
            showItems();
        }, 300);
    } else {
        clearTimeout(timer);

        useYourFullyRenderedImage();
    }
}

- Denis