使用jQuery加载图片：在Safari中未显示

Question

可能是重复问题：
即使图像已缓存，jQuery回调图像加载

我有一个具有属性 opacity:0; 的 #mainImg img。

当页面加载时，我触发以下 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太快了吗？

- onimojo

---

与您的问题无关，但您可能希望保存对 $('#mainImg') 或 $('#mainImg img') 的引用，或者链接您的方法，因为您经常使用它。 - Jeff

jQuery文档中提到了使用.load加载图片时可能会遇到的问题。请参考这个问题来寻找解决方案。 - Blazemonger

我尝试过使用 $（“img”）.one（'load'，function（）{ // do stuff }）。each（function（）{if（this.complete）$（this）.load（）; }）; 修复方法，但在Safari中无效。 - onimojo

Answer 1

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

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

可在Firefox / Chrome / Safari中工作。

- onimojo