获取图像尺寸问题

Question

我一直在尝试动态加载图像 - 动态调整大小以通过 jQuery 设置包装器 div 的高度和宽度。

但问题是 alert($(".imageContainer").height() 显示 0 因为我相信当我调用此函数时图像尚未加载。

该过程是：当用户单击网格上的缩略图时，会弹出一个模式窗口，并且一些简单的 jQuery 代码会在此模式窗口上设置 src 属性以显示相应的图像

：

$(".thumb-img").click(function(){
    $(".bigImage").attr("src","somewhere/"+$(this).attr("data-imageid")+".jpg");
    //needs to know whether image has been loaded or not
    $(".imageContainer").height($(".bigImage").height());
    $(".imageContainer").width($(".bigImage").width());
});

图像大小不是 。一致，我需要根据它们的大小动态设置大小，

该怎么做？

我

Answer 1

需要知道图像是否已被
加载与否

如果您想知道图像是否已加载，可以使用 load 事件（它也适用于图像）：

$(".bigImage").load(function(){
  alert(' I am loaded...');
});

当您将​​与图像相关的代码放入 load< /code> 窗口通过后，所有图像和其他资源都已加载，因此您可以放心地假设所有图像均已加载：

$(window).load(function(){
  // by now all images are loaded
});