我有一个网站，它会静态显示一个图像，我在预览部分下面有一些图像缩略图，当我点击缩略图时，大图像会显示在预览部分，我在点击缩略图时使用jQuery替换IMG标签的SRC，所以在浏览器上显示所选图像需要一些时间，在加载新图像之前，即使在拇指上点击几秒钟后，它也会显示上一个图像（加载到浏览器的时间取决于互联网连接），所以我想在加载到浏览器时显示一个图像，上面写着"正在加载…"。如有任何帮助，我们将不胜感激。我尝试了img标记的onload（），但它似乎是第一次加载，因为我只是单独更改SRC值，但它不起作用。这是我的代码看起来像
function show_preview()
{
$("#preview_loader_gif").css( "display", "block" ); //to show the loader image
$('#big_image').attr( "src", selected_file_src); //to change the source
$("#preview_loader_gif").css( "display", "none" ); //to hide the loader image
}
beforeSend: function () {
$('YOUR_SELECTOR').before('<img src="YOUR_PATH/loading.gif" class="loading">');
},
success: function(html){
$(".loading").remove();
}
如果您正在使用ajax调用。
或者只添加显示加载图像的显示拇指方法的开始和隐藏它的方法的结束
<div>
<img src="image.png" id="image" />
<span class="loading">Loading...</span>
$(function(){
//animate loading text
$(".loading").animate({left: '+=100'},500);
//On image loaded, remove loading text
$("#image").load(){
$(".loading").remove();
}
});