Ajax 加载通话期间附加的 gif

发布于 2024-10-16 11:49:28 字数 151 浏览 3 评论 0原文

我有这个 ajax 调用：

$('.ajaxtrigger2').click(function(){
$('#target').load('xxx.html');
...

如何在这个简单的调用期间附加加载消息或图像？谢谢

原文

I have this ajax call:

$('.ajaxtrigger2').click(function(){
$('#target').load('xxx.html');
...

how to append a Loading msg or image during this simple call? thx

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

流绪微梦 2024-10-23 11:49:28

创建另一个元素，例如

<div id="loading" style="display: none">Loading...</div>
<div id="target"></div>

，然后在开始加载时显示加载元素，并在通过 load 回调完成时隐藏它。

$('.ajaxtrigger2').click(function() {
    $("#loading").show();
    $("target").load('xxx.html', function() { 
        $("#loading").hide();
    });
}

Create another element, e.g.

<div id="loading" style="display: none">Loading...</div>
<div id="target"></div>

then show the loading element when you start loading, and hide it when its done through the load callback.

$('.ajaxtrigger2').click(function() {
    $("#loading").show();
    $("target").load('xxx.html', function() { 
        $("#loading").hide();
    });
}

回复收藏 0 原文

转身泪倾城 2024-10-23 11:49:28

创建一个 Img，使 id 等于“正在加载”之类的内容，并具有“display: none;”等默认样式然后将其添加到您的 jQuery onReady 事件中

$("#loading").ajaxStart(function () { $(this).show(); }).ajaxStop(function () { $(this).hide(); });

Create an Img, make the id equal to something like 'loading' and has a default style like "display: none;" and then add this to your jQuery onReady event

$("#loading").ajaxStart(function () { $(this).show(); }).ajaxStop(function () { $(this).hide(); });

回复收藏 0 原文

蓝颜夕 2024-10-23 11:49:28

我个人喜欢用css，添加删除东西。

<style>
 #target.loading {background image you want, alongside some greying or whatever}
</style>
<script>
....
$('.ajaxtrigger2').click(function(event){
$('#target').addClass("loading");
$('#target').load('xxx.html', function(data,text,xhr){
    $('#target').removeClass("loading");
});
});
...
</script>

I personally like to use css, and add remove stuffs.

<style>
 #target.loading {background image you want, alongside some greying or whatever}
</style>
<script>
....
$('.ajaxtrigger2').click(function(event){
$('#target').addClass("loading");
$('#target').load('xxx.html', function(data,text,xhr){
    $('#target').removeClass("loading");
});
});
...
</script>

回复收藏 0 原文

左秋 2024-10-23 11:49:28

有几种方法。我的首选方法是将函数附加到元素本身的 ajaxStart/Stop 事件。

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

每当您执行任何 ajax 调用时，ajaxStart/Stop 函数都会触发。

there's a couple of ways. My preferred way is to attach a function to the ajaxStart/Stop events on the element itself.

$('#loadingDiv')
    .hide()  // hide it initially
    .ajaxStart(function() {
        $(this).show();
    })
    .ajaxStop(function() {
        $(this).hide();
    })
;

The ajaxStart/Stop functions will fire whenever you do any ajax calls.

回复收藏 0 原文

~没有更多了~