想通过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"));
});

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

  

可以停止为已经存在于浏览器缓存中的图像启动

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

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

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