在将新图像加载到网站时显示加载...动画-Java 学习之路

我有一个静态显示图像的网站，我在预览部分下方有一些图像缩略图，当我点击缩略图时，大图像将显示在预览部分，我在这里使用jQuery替换SRC单击缩略图时显示IMG标签，因此在浏览器上显示所选图像需要一些时间，直到新图像加载后，即使在拇指上点击几秒钟后，显示前一个图像（加载到浏览器的时间取决于互联网）连接），所以我想在加载到浏览器中时显示一个“正在加载...”的图像 . 任何帮助，将不胜感激 . 我尝试使用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 回答

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

回复于 2024-05-03T10:36:38+08:00

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

1 回答

相关问题