jquery - jquery css('height') 在附加后 17 ms 后才可用

Question

我在将一些加载到绝对位置（之前由客户团队设置）的图像居中时遇到问题。

我已经将问题追溯到获取元素高度。

附加了一个图像，如果我尝试在之后立即获取它的高度，它会返回 0。我使用 setTimeout 进行了一些测试，并将其缩小到 17 毫秒（在我的系统上）延迟，以使高度正确返回。

在不使用 setTimeout 函数的情况下如何解决这个问题，运行 webapp 的每台计算机都会有不同的延迟时间？

Answer 1

这 17 毫秒是您的浏览器下载和解析图像！

对图像的事件进行格式化load，因为浏览器在加载之前不知道图像有多大。例如：

var $img = $('<img src="' + image_source + '"/>');
// The browser might not load the image unless it is attached to the DOM
$('#image_container').append($img);
$img.on('load', function() {
    // Now we know how big the image is
    update_my_ui($img.height());
});

如果您不希望用户界面在文件加载时跳来跳去，您总是可以在屏幕外预加载图像。不幸的是，我听说在旧版浏览器中从缓存加载图像时，您可能不会触发加载事件，因此您可能需要进一步调查。