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中时，所有图像和其他资源都会被加载，因此您可以安全地假设所有图像都已加载：

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

获得图像大小问题

1 个答案: