使用 jquery 加载图像：未在 Safari 中显示 [重复]答案

【问题标题】：loading an image with jquery : not showing in safari [duplicate]使用 jquery 加载图像：未在 Safari 中显示 [重复]
【发布时间】：2012-12-07 00:57:54
【问题描述】：

可能重复：
jQuery callback on image load (even when the image is cached)

我有一个#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 是不是太快了？

【问题讨论】：

与您的问题无关，但您可能希望保存对 $('#mainImg') 或 $('#mainImg img') 的引用，或者将您的方法链接起来，因为您经常使用它。
jQuery docs 警告在图像上使用 .load 时会出现问题。有关解决方案，请参阅this question。
我尝试过修复$("img").one('load', function() { // do stuff }).each(function() { if(this.complete) $(this).load(); });，但它在 Safari 中不起作用。
谢谢杰夫，我已经改了。

标签： jquery css safari

【解决方案1】：

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

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

适用于 Firefox/Chrome/Safari。

【讨论】：