gpt4 book ai didi

javascript - 单个 PHP 页面中的两个加载器

转载 作者:行者123 更新时间:2023-12-02 13:49:36 24 4
gpt4 key购买 nike

我正在尝试嵌入两个“加载器”,一个在页面加载时嵌入,另一个在用户在加载的页面上提交表单时嵌入。

该脚本如下所示,位于 <head> 内.

<script type="text/javascript">

// loader on form submit

$(document).ready(function(){
$('#myform').submit(function() {
$('#loaderImage').show();
return true;
});
});

// the page load 'Loader'

$(window).load(function() {
$(".imageCarryingDiv").fadeOut();;
});
</script>

和一个<div>里面<body>看起来像这样:

<div class="imageCarryingDiv"><img src="../images/loader.gif" style="height:30px; width:auto;" class="loaderImgx" alt=""><br>Loading...</div>

问题是页面加载上的“加载器”行为符合预期,但是提交表单时,页面加载“加载器”再次出现。我知道这种情况会发生,因为提交表单时页面会再次加载。您建议我如何避免这种情况,加载器仅在预期出现的位置出现,一个在页面加载,另一个在表单提交。

最佳答案

您需要防止触发表单的默认行为,以便提交表单时页面不会重新加载。以下是使用 preventDefault() 执行此操作的方法:

$(document).ready(function() {
$('#myform').submit(function(e) {
// Use prevent default to avoid page reload
e.preventDefault();
$('#loaderImage').show();
return true;
});
});

preventDefault() 的文档位于:http://www.w3schools.com/jsref/event_preventdefault.asp

关于javascript - 单个 PHP 页面中的两个加载器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/41093529/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com