1

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

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

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

为了解决这个问题，我添加了一个 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

4

4 回答 4

1

我找到了一个我认为在这种情况下有帮助的解决方案。它检查图像以查看其宽度是否为“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 */
        });

        }
});
于 2013-05-09T12:07:29.367 回答
0

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

于 2013-05-09T11:07:21.423 回答
0

您可以尝试以下一种：

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

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

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

});

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

于 2013-05-09T11:04:31.787 回答
0

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

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);
        }
    })
})
于 2013-05-09T21:33:14.407 回答