jquery - 想要通过 jquery 更改图像源时显示等待 gif

Question

我有这个代码，我通过点击缩略图来更改主图像

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

我想在加载新闻图片时显示等待 gif。谢谢

Answer 1

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

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

在设置之前显示您的加载 gifsrc

$(".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());
    });

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