jquery 如何在JavaScript中显示加载器图像

xkrw2x1b  于 2023-04-29  发布在  jQuery
关注(0)|答案(3)|浏览(140)

大家好,我正在使用javascript,现在我想在点击按钮后显示“加载器图像”,那么我该怎么做呢?这是我的图片url

https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif

这是我当前的代码

jQuery('#double_click_submit').click(function(event) {
//want to display loader (url menitoned above)
});
cczfrluj

cczfrluj1#

你可以在默认情况下隐藏加载器,并在按下按钮时显示它,如下所示:

jQuery('#double_click_submit').click(function(event) {
  event.preventDefault();
  jQuery('#loader').show();
});
#loader {
  display: none;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="loader">
  <img src="https://media3.giphy.com/media/3oEjI6SIIHBdRxXI40/giphy.gif?cid=ecf05e47v26jax2ovrxmxvzz6eb35pjoa6j5uhmyy459oj4y&rid=giphy.gif&ct=g" alt="Loading...">
</div>

<button id="double_click_submit">Click me to load!</button>
yqhsw0fo

yqhsw0fo2#

jQuery('#double_click_submit').click(function(event) {
  jQuery('body').html('<img src="https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif">');
});

如果你想在页面的顶部显示它(我使用了body,但如果你想在任何类或id的开头插入,你可以用它代替)

jQuery('#double_click_submit').click(function(event) {
  jQuery('body').prepend('<img src="https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.gif">');
});
wvt8vs2t

wvt8vs2t3#

要使用jQuery在单击按钮后显示加载器图像,您可以按照以下步骤操作:
1.选择图像元素并将其存储在变量中:
var loaderImage = $('',{ src:'https://xxxxxxxxx/wp-content/uploads/2023/04/Loading_icon.);
1.将加载器映像附加到要显示它的容器中:
jQuery('# container').int n(int n);
将#container替换为要显示加载器图像的元素的ID或类。
3.将加载器图像添加到按钮的click事件处理程序中:

jQuery('#double_click_submit').click(function(event) {
    // Add the code to display the loader image
    jQuery('#container').append(loaderImage);
    
    // Add the code to perform the button click action
    // ...
});

这将在单击按钮时将加载器图像添加到容器中。
注意:如果你想在按钮点击动作完成后隐藏加载器图像,你可以使用hide()方法来隐藏图像:

loaderImage.hide();

相关问题