Question

如何检查（使用 jquery 或 vanilla js ）页面上的所有图片都已加载，并且它们已在最终的完整高度进行渲染，并且他们的父元素已调整到那个高度？

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

我尝试过的东西无法满足我的需求：

$(document).ready() and $(window).onload()都太早了，因为图片可能没有在完整高度渲染，因此会使这些部分无法呈现在其最高位置。

imagesLoaded库。与上述相同的问题，并不考虑将图像渲染到其全高。

Answer 1

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

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

Answer 2

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

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

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

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

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

和用户使用的当前高度 scrollY

使用此JSFiddle的更多信息。

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

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

3 个答案: