我正在使用下面的脚本来显示加载gif,同时文件已准备好下载,然后一旦完成,它会在几秒后隐藏。 但我只想下载文件一次,但是当我点击链接时,它会下载同一个文件两次。我在论坛的某个地方找到了代码,所以我真的不知道如何阻止它运行两次url。
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
setTimeout(function() {
clickedLink.html(originalHtml);
window.location = destination;
},2500);
$('<iframe>').hide().appendTo('body').load(function() {
window.location =sagar;
}).attr('sagar', sagar);
});
.loader,
.loader:before,
.loader:after {
border-radius: 50%;
width: 2.5em;
height: 2.5em;
-webkit-animation-fill-mode: both;
animation-fill-mode: both;
-webkit-animation: load7 1.8s infinite ease-in-out;
animation: load7 1.8s infinite ease-in-out;
}
.loader {
color: darkblue;
font-size: 10px;
margin: 80px auto;
position: relative;
text-indent: -9999em;
-webkit-transform: translateZ(0);
-ms-transform: translateZ(0);
transform: translateZ(0);
-webkit-animation-delay: -0.16s;
animation-delay: -0.16s;
}
.loader:before,
.loader:after {
content: '';
position: absolute;
top: 0;
}
.loader:before {
left: -3.5em;
-webkit-animation-delay: -0.32s;
animation-delay: -0.32s;
}
.loader:after {
left: 3.5em;
}
@-webkit-keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
@keyframes load7 {
0%,
80%,
100% {
box-shadow: 0 2.5em 0 -1.3em;
}
40% {
box-shadow: 0 2.5em 0 0;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; ">
<ol class="tree">
<li>
<label for="folder1">First Semester</label> <input type="checkbox" id="folder1" />
<ol>
<li>
<label for="subfolder11">Classical Mechanics </label> <input type="checkbox" id="subfolder11" />
<ol>
<li class="file"><a href="https://drive.google.com/uc?export=download&id=1Q2Sr1ouPQ_P-i48tlRxcGctiMtlIbBwX">Solutions_to_Problems_in_Goldstein)</a></li>
<li class="file"><a href="https://drive.google.com/uc?export=download&id=1GxWkj_oevSmxHFp4rDrNbvM5kBTaJ31B">Goldstein Solution Chapter 8 Soln</a></li>
<li class="file"><a href=" https://drive.google.com/uc?export=download&id=1f9wJftmvaI-B_jpYXPIk1rTbiHOJ-BzU">Goldstein Chapter 9 Soln</a></li>
<li class="file"><a href=" https://drive.google.com/uc?export=download&id=1OXoTG3GmY3EhNBnPhXID4hHxzJUN-tGb">Numericals Jacobi Angle ( Hints )</a></li>
<li class="file"><a href="https://drive.google.com/uc?export=download&id=1nD3ChGK-sMNpXbXXT394Fgu0xS1_aa35">Angle Jacobi Numericals ( Complete Solution)</a></li>
</ol>
</li>
</ol>
</li>
</ol>
</body>
任何帮助都会非常感激。
答案 0 :(得分:0)
在window.location = destination;
函数内部以及加载隐藏的iframe之后,您似乎正在调用setTimeout
(触发浏览器下载文件)两次,我认为这是正确的位置。
请停止拨打setTimeout
,如下所示:
$(".file a").on("click",function(e){
var originalHtml=$(this).html();
$(this).html('<div class="load-container load8"><div class="loader">Loading...</div></div>'); // do your UI thing here
e.preventDefault();
var destination = this.href;
var clickedLink=$(this);
$('<iframe>').hide().appendTo('body').load(function() {
window.location = destination;
clickedLink.html(originalHtml);
}).attr('src', destination);
});