大家好,我正在使用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) });
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>
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">'); });
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();
3条答案
按热度按时间cczfrluj1#
你可以在默认情况下隐藏加载器,并在按下按钮时显示它,如下所示:
yqhsw0fo2#
如果你想在页面的顶部显示它(我使用了body,但如果你想在任何类或id的开头插入,你可以用它代替)
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事件处理程序中:
这将在单击按钮时将加载器图像添加到容器中。
注意:如果你想在按钮点击动作完成后隐藏加载器图像,你可以使用hide()方法来隐藏图像: