javascript - 在将新图像加载到网站时显示正在加载...动画

Question

我有一个静态显示图像的网站，我在预览部分下方有一些图像缩略图，当我单击缩略图时，大图像将显示在预览部分，我在这里使用 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

    }

Answer 1

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