如何检测何时加载所有图像并在适当的高度渲染元素答案

【问题标题】：How to detect when all images are loaded and elements are rendered at their appropriate heights如何检测何时加载所有图像并在适当的高度渲染元素
【发布时间】：2017-06-10 18:29:29
【问题描述】：

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

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

我尝试过的东西不能满足我的需求：

$(document).ready() and $(window).onload() 都为时过早，因为图像可能没有按其全高渲染，因此导致部分未按全高渲染。

imagesLoaded 库。与上述相同的问题，不考虑将图像渲染到完整高度。

【问题讨论】：

我猜你的意思是$(window).on("load"...
您是动态加载内容还是从服务器请求页面时所有内容都存在？
@epascarello 我一直在使用jQuery .load() event，我认为它可以与你所说的互换。原谅我写原始问题时的伪代码！
@epascarello 我没有动态加载任何东西，它都存在于对服务器的原始请求中。

标签： javascript jquery image loading

【解决方案1】：

根据我的经验，我认为这不是微不足道的。 window.onload 可能会有所帮助，但在动态加载图像时并不可靠。过去，我使用某种 hack 来使其可行。基本上，我使用window.setInterval 并通过查看属性naturalWidth 来检查图像是否真的可用（请参阅：https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement）。

这里是一个实现示例：https://jsfiddle.net/yu8zr20h/

【讨论】：

【解决方案2】：

您正在以不正确的方式解决此问题。您需要将用户窗口的当前 Y 值与所有组件或至少包含不同导航值的容器的 Y 值进行比较。

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

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

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

现在您可以使用以下方法检查相对于完整 html 页面的高度 document.gelElementBtId('element-id').offsetTop

以及用户当前使用的高度 scrollY

更多信息请使用JSFiddle。

【讨论】：

我忘了补充，每次调用checking函数时都需要重新计算offsetTop值。因此，每次调用检查函数时，offsetTop 值都是该时刻的正确值。
感谢您的回答！不幸的是，出于性能原因，我试图避免这种特殊的实现，它每次调用函数时都需要重新计算 offsetTop 值。计算 offsetTop 会触发该元素的重绘（如果不是整个页面），并且我在滚动时已经在执行其他图形密集型操作。
我不知道！你能告诉我更多关于这方面的信息吗？
this article 是我第一次了解到这一点的地方。整篇文章都很好，但那是该主题的链接。 “每当你在 JavaScript 中请求一个元素的 offsetTop 属性时，你会立即给浏览器很多工作，因为它现在必须关闭并布局页面，以便它可以给你正确的答案。这个过程称为回流。如果我们然后根据 offsetTop 值更改元素的另一个属性，该元素（以及因此它的合成器层）将需要重新绘制，这可能很昂贵。"
在我之前的评论中，我的意思是“回流”而不是“重绘”。

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

【讨论】：