我有一个静态显示图像的网站,我在预览部分下方有一些图像缩略图,当我点击缩略图时,大图像将显示在预览部分,我在这里使用jQuery替换单击缩略图时IMG标签的SRC,因此在浏览器上显示所选图像需要一些时间,直到新图像加载后,即使在拇指上点击几秒钟后,也会显示前一个图像(将时间加载到浏览器中)取决于互联网连接),所以我想在加载到浏览器时显示一个图像说“正在加载...”。 任何帮助,将不胜感激。 我尝试使用onload()获取img标签,但似乎是第一次加载,因为我只是单独更改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
}
答案 0 :(得分:0)
beforeSend: function () {
$('YOUR_SELECTOR').before('<img src="YOUR_PATH/loading.gif" class="loading">');
},
success: function(html){
$(".loading").remove();
}
如果你正在使用ajax调用。
或者只是添加显示show thumb方法的加载图像开始并将其隐藏在方法的末尾
<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();
}
});