“显示：无”div中的图像未加载onpageload [重复]答案

【问题标题】：Images in "display: none" divs not loading onpageload [duplicate]“显示：无”div中的图像未加载onpageload [重复]
【发布时间】：2014-03-28 16:15:39
【问题描述】：

我正在缩放图像以适合 div 并且我想通过使用位置将它们与信箱居中，但是当我尝试在设置高度后立即使用 .width() 获取元素的宽度时，.width() 返回 0 .

例如：

$(image).css("height", "100%");
console.log($(image).width());

这会将 0 回显到控制台，但如果我稍后从控制台调用 $(image).width()，则会给出正确的值。如何在更改高度后立即获取 <img> 元素的宽度？

编辑：

所以我的代码是这样的：

$(window).load(function(){
    cSCMH();
});

function cSCMH()
{
    //Some other code
    for(var i = 0; i < $("sc mh im img").length; i++)
    {
        var image = $("sc mh im img")[i];
        
        //More code
        $(image).css("height", "100%");
        console.log($(image).width());
    }
}

控制台仍然收到 0

编辑 2：

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

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

我已经确认这是问题所在。在 div 的显示设置为阻止之前，不会加载图像。如何让图片在 onpageload 中加载？

【问题讨论】：

您确定在执行此操作之前已加载图像
不，我不是。我认为如果我从 $(document).ready() 调用事件，它将被加载。不是这样吗？
不...您需要使用$(window).load(function(){}) 来加载图像。文档准备好不会等待图像加载而窗口加载完成
所以我把它放在$(window).load(function(){}); 中，但是在计算图像宽度之前它仍然没有加载。这与我将其称为单独的方法这一事实有关吗？
您能否分享更多有关问题的上下文，例如标记以及方法的调用方式等

标签： javascript jquery css

【解决方案1】：

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

【讨论】：

【解决方案2】：

您需要等待 dom 更改。

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

【讨论】：

你为什么要setTimeout？

【解决方案3】：

当你没有设置它的父 div 固定高度时，以百分比设置高度不会设置它。所以你也可以尝试像这样对你的身体使用身高 100%：

html,body{height: 100%;}

【讨论】：

它的父高度已设置。高度设置正确，但在我尝试访问宽度时似乎没有传播。

【解决方案4】：

尝试使用图片的加载事件

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

【讨论】：