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

时间:2013-11-21 07:29:19

标签: javascript php jquery html css

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

    }

1 个答案:

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