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
});

在设置src之前显示加载gif

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

更新:如果图像被缓存并且事件不会触发，则这将不起作用。

Can cease to fire for images that already live in the browser's cache

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

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

这可能会影响性能，但它确实有效