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

Question

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

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

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

为了解决这个问题，我添加了 2 秒的延迟，以确保在查找 img 高度之前加载 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

您需要做的是将函数绑定到任何尚未加载的图像的加载事件，类似这样

function processImage(imageElement){
    // do your stuff here
    var img=$(imageElement);
    console.log("working on image: "+img.width() +"x"+img.height());
}

$(document).ready(function () {
    // iterate through the images
    $(".resize-thumb-img img").each(function(){
        var img = $(this);
        if(img.width()==0 || img.height()==0){
            // image has not fully loaded yet, so process it once loaded
            img.on('load',function(){processImage(this);})
        }else{
           // image is loaded so process the image straight away
            processImage(this);
        }
    })
})

Answer 2

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

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

        }
});

Answer 3

如果您可以控制服务器端脚本，您就不能简单地将位图的大小连同其文件名一起存储在数据库中吗？然后你可以设置 IMG 元素的 WIDTH 和 HEIGHT 属性。

Answer 4

你可以试试下面的：

$('img').each(function() {

    $(this).attr('height',$(this).height());

    $(this).attr('width',$(this).width());

});

这将帮助您使用 jquery 找到图像的高度。