通过jQuery更改图像源时想要展示等待GIF

Question

我有这段代码，可以在缩略图被点击时更改主图像

$(".thumb").click(function() {
    $("#mainimage").attr("src", $(this).attr("alt"));
});

当新闻图片加载时，我希望显示等待gif图像。谢谢。

- techansaari

---

你可以在开始加载图像之前放置一个“占位符”，然后在加载完成后将其删除。 - Math chiller

请问您能否给我展示一下代码，我将不胜感激。 - techansaari

创建 <img id = "wait" style = "display:none;"> 并在 $(".thumb").click(function() { $("#wait").toggle() /*此处放置代码*/ $("#wait").toggle() }); 中编写代码。 - Math chiller

@tryingToGetProgrammingStraight：这不会起作用，因为图像是异步加载的，请查看我下面的答案。 - Khanh TO

@KhanhTO 不确定那是什么意思，但无论如何。 - Math chiller

请看这里：http://stackoverflow.com/questions/12905468/jquery-progressbar-on-changing-image-attrsrc - Solomon Closson

Answer 1

使用.load。当图片加载完成时，将触发此事件，您可以在此事件处理程序中隐藏加载gif。

$("#mainimage").load(function(){
   //Hide your wait gif
});

在设置 src 前展示你的加载 GIF。

$(".thumb").click(function() {
    //show your wait gif
    $("#mainimage").attr("src", $(this).attr("alt"));
});

更新: 如果图片已被缓存，事件将不会触发。

对于已经存在于浏览器缓存中的图像可能不起作用

一个简单的解决方法是添加随机字符串以防止缓存。

$(".thumb").click(function() {
        //show your wait gif
        $("#mainimage").attr("src", $(this).attr("alt") + "?" + Math.random());
    });

这可能会影响性能，但它可以工作

- Khanh TO

---

我认为你想要使用 $("body").on("load", "#mainimage", function() { ... });，因为src正在改变，这将触发该元素的另一个 .load() 事件。 - Solomon Closson

@Solomon Closson：感谢您的建议，使用委托事件处理动态生成的元素也是一种选择。 - Khanh TO

我想说的是，在初始图像加载后，这将不起作用。当您更改图像的src值时，它不会再次触发.load()。我甚至认为委托事件也不起作用。您很可能需要创建一个新的图像对象，然后它应该可以工作。 - Solomon Closson

我猜问题出在浏览器缓存上，当你从缓存中重新加载图像时，事件不会触发。 - Khanh TO

如果图像已从缓存加载，则肯定不需要显示加载gif。 - Simón

@techansaari：请查看我的更新答案，提供了一个简单的解决方案来防止缓存。 - Khanh TO