Question

我正在缩放图像以适应div，我希望通过使用位置将它们置于信箱中心，但是当我在设置高度后立即尝试使用.width()获取元素的宽度时，{{1返回0。

例如：

.width()

这会将0回显到控制台，但是如果我稍后从控制台调用$(image).css("height", "100%"); console.log($(image).width());，则会给出正确的值。如何在更改高度后立即获得$(image).width()元素的宽度？

编辑：

所以我的代码是这样的：

<img>

控制台仍然收到0

编辑2：

好的，所以我想我知道问题的根源是什么。图像看起来不会加载到页面中，直到它们在屏幕上可见（我将它们放在一个tab div中，其中显示设置为none onload）。

有没有办法强制图像加载，即使它们不可见？

我已经证实这是个问题。在div的显示设置为阻止之前，不会加载图像。如何在onpageload中加载图像呢？

Answer 1

尝试使用图片的加载事件

function cSCMH() {
    $("sc mh im img").load(function () {
        var $img = $(this);
        $img.css("height", "100%");
        console.log($img.width());
    }).filter(function () {
        return this.complete;
    }).trigger('load');
}

Answer 2

由于height()未提供callback功能，您可以在此处使用animate()：

$(image).animate({"height": '100%'}, function() {  
     console.log($(image).width());
})

另外，为了确保正确加载所有图像，您可以将代码包装在$(window).load(function() { ... });

中

$(window).load(function() {
    $(image).animate({"height": '100%'}, function() {  
        console.log($(image).width());
    })
});

Answer 3

你需要等待dom改变。

$(image).css("height", "100%");
setTimeout(function() {
  console.log($(image).width());
}, 0);

Answer 4

如果未设置父级的div固定高度，

设置高度百分比将不会设置它。所以你也可以尝试使用身高100％的身体：

html,body{height: 100%;}

“display：none”中的图像不加载onpageload

编辑：

编辑2：

4 个答案: