jquery - 使用 jquery 加载图像：未在 safari 中显示

Question

可能重复：
图像加载时的 jQuery 回调（即使图像被缓存）

我有一个#mainImg img具有opacity:0;.

当页面加载时，我触发以下 jQuery 代码：

$("#mainImg img").load(function(){ 
   $("#mainImg img").center(); // center everything
   $("#mainImg img").animate({"opacity": "1"}, "400"); // fade the image in
});

它适用于 firefox/chrome/safari。我使用该.load()方法是因为在 webkit 浏览器中，宽度和高度是在图像加载后设置的。

但是当我单击缩略图时尝试加载另一个图像时，该图像在 safari 中不起作用（并且在 chrome 和 firefox 中起作用）。

这是我的缩略图系统代码：

$("#th2").click(function() {
    $("#mainImg").html('<img src="' + new_th2_link + '" />');
    $("#mainImg img").load(function(){ 
        $("#mainImg img").center();
        $("#mainImg img").animate({"opacity": "1"}, "400");
    });
});

在 Safari 中，#mainImg img具有width:0; height:0;. Safari 是不是太快了？

Answer 1

这是我最终使用的解决方案：

$("#mainImg img").animate({"opacity": "1"}, "400");
    setTimeout(function(){
        $("#mainImg img").center()
    }, 10);

适用于 Firefox/Chrome/Safari。