javascript - 使用 JavaScript 查找图像的高度 - 图像加载错误

Question

我似乎无法在 Typo3 网站上使用 Javascript 找到图像的高度。

基本上我有在 $(document).ready(function () { 内运行的 javascript。它在页面上查找图像并找到其高度和宽度，然后根据结果进行操作。

有时这有效，有时则无效。通常，我会得到宽度值，但没有高度值。我怀疑这是因为浏览器尚未完成加载图像。

为了解决这个问题，我添加了 2 秒的延迟，以确保在查找其高度之前加载 img。但这并不是解决问题的好方法，尤其是当某人的下载速度较低时。

在执行操作之前，我还能如何检查图像是否已完全加载？

这是一些 HTML:

<div class="resize-thumb-img">
    <img src="#.jpg" />
</div>
<div class="resize-thumb-img">
    <img src="#.jpg" />
</div>
<div class="resize-thumb-img">
    <img src="#.jpg" />
</div>

还有一些 JS:

$(document).ready(function () {

    setTimeout(myFunctionX, 2000);

    function myFunctionX() {
        $(".resize-thumb-img img").each(function(){  //for each image

            console.log("working on image: "+$(this).width() +"x"+$(this).height());

            /* MORE WORK HERE */
        });
    }
});

控制台日志可以给出类似 235x420 OR 235x0 OR 0x0

的结果

Answer 1

我找到了一个我认为在这方面有帮助的解决方案。它检查图像以查看其宽度是否为“0”。如果是，则等待 1 秒，然后重试。如果它不是“0”，它就会调用我之前的函数。包含 || 可能有用null 到第一个 if 语句 - 我尚未在所有浏览器上进行测试。

$(document).ready(function () {

    checkLoadState();

    function checkLoadState()   //checks to see if images are loaded before continuing
    {
        if ($(".resize-thumb-img img").width() != "0")
        {
            console.log("Images loaded. Resizig...");
            myFunctionX();
        }
        else
        {
            console.log("Waiting for images to load.");
            setTimeout(checkLoadState, 1000); // check again in a second
        }
    }

    function myFunctionX() {
        $(".resize-thumb-img img").each(function(){  //for each image

            console.log("working on image: "+$(this).width() +"x"+$(this).height());

            /* MORE WORK HERE */
        });

        }
});