当href链接被点击在html页面的div内时显示加载文本或图像

我正在制作一个网站，有大量的Notes和要下载的书籍。我想单击链接为下载链接时显示任何图像或任何文本，当请求完成并且文件开始下载时，请删除图像或加载文本。当href链接被点击在html页面的div内时显示加载文本或图像

我已经经历了很多论坛，但找不到任何解决方案。

这里是我的

<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; "> 
 
    
 
    <ol class="tree"> 
 
    
 
    <li> 
 
     <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

任何帮助会非常感激的HTML文件。

来源

2017-10-15 BlueYeti24

单击事件是由jQuery的.on("click",function(){})处理，但是当下载完成文件，我的信息是基于这个问题＃1的，我们不能处理：Browser event when downloaded file is saved to disk

$(".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; 
 

 
    },1000); 
 
    $('<iframe>').hide().appendTo('body').load(function() { 
 
     window.location = destination; 
 
    }).attr('src', destination); 
 
});

.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> 
 
<html> 
 
<body style="color: black; background-color: #EFF6E4;font-family: myFirstFont; "> 
 
    
 
    <ol class="tree"> 
 
    
 
    <li> 
 
     <label for="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

来源

2017-10-15 10:31:43

在这里我修改了你的代码，现在的工作方案是，

<script type="text/javascript"> 
 
    $(".file a").on("click",function(){ 
 
    $(this).text('Loading...'); // do your UI thing here 
 
    e.preventDefault(); 
 
    var destination = this.href; 
 
    setTimeout(function() { 
 
     window.location = destination; 
 
    },100); 
 
    $('<iframe>').hide().appendTo('body').load(function() { 
 
     window.location = destination; 
 
    }).attr('src', destination); 
 
}); 
 
</script>

<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="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

但它不会回到原来的文字，并永久卡在加载。

来源

2017-10-15 11:53:46 BlueYeti24

我编辑我的答案和它的工作，如果有帮助，请记得要点击**复选标记**我的回答的左侧，予以批准。我们将帮助其他与您具有相同问题的用户寻找解决方案。最好的问候 –

@MehdiBouzidi谢谢..这正是我所需要的。最后一个问题...如何更改文本加载的字体大小和字体颜色。如果我想加载加载GIF而不是相同的时间..我该怎么做？例如，如果我想从这里的任何GIF相同的时间https://projects.lukehaas.me/css-loaders/我应该怎么做 – BlueYeti24

我再次编辑我的答案检查，看看结果:)好运气 –

这里我找到了另一个加载gif的解决方案，这将是一个最好的选择，但问题是它不会消失并继续加载。如何在一段时间后结束并返回原始状态。

$(".file a").on("click",function(){ 
 
    $(this).parent().parent().append('<div style="" id="loadingDiv"><div class="loader">Loading...</div></div>'); 
 
$(window).on('load', function(){ 
 
    setTimeout(removeLoader, 100); //wait for page load PLUS two seconds. 
 
}); 
 
function removeLoader(){ 
 
    $("#loadingDiv").fadeOut(0, function() { 
 
     // fadeOut complete. Remove the loading div 
 
     $("#loadingDiv").remove(); //makes page more lightweight 
 
    }); 
 
} 
 

 
});

.loader, 
 
     .loader:after { 
 
      border-radius: 50%; 
 
      width: 10em; 
 
      height: 10em; 
 
     } 
 
     .loader {    
 
      margin: 60px auto; 
 
      font-size: 10px; 
 
      position: relative; 
 
      text-indent: -9999em; 
 
      border-top: 1.1em solid rgba(255, 255, 255, 0.2); 
 
      border-right: 1.1em solid rgba(255, 255, 255, 0.2); 
 
      border-bottom: 1.1em solid rgba(255, 255, 255, 0.2); 
 
      border-left: 1.1em solid #ffffff; 
 
      -webkit-transform: translateZ(0); 
 
      -ms-transform: translateZ(0); 
 
      transform: translateZ(0); 
 
      -webkit-animation: load8 1.1s infinite linear; 
 
      animation: load8 1.1s infinite linear; 
 
     } 
 
     @-webkit-keyframes load8 { 
 
      0% { 
 
       -webkit-transform: rotate(0deg); 
 
       transform: rotate(0deg); 
 
      } 
 
      100% { 
 
       -webkit-transform: rotate(360deg); 
 
       transform: rotate(360deg); 
 
      } 
 
     } 
 
     @keyframes load8 { 
 
      0% { 
 
       -webkit-transform: rotate(0deg); 
 
       transform: rotate(0deg); 
 
      } 
 
      100% { 
 
       -webkit-transform: rotate(360deg); 
 
       transform: rotate(360deg); 
 
      } 
 
     } 
 
     #loadingDiv { 
 
      position:absolute;; 
 
      top:0; 
 
      left:0; 
 
      width:100%; 
 
      height:100%; 
 
      background-color:#000; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<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="folder2">First Semestar</label> <input type="checkbox" id="folder2" /> 
 
     <ol> 
 
     
 
     <li> 
 
      <label for="subfolder2">Electronics</label> <input type="checkbox" id="subfolder2" /> 
 
      <ol> 
 
      <li class="file"> 
 

 
      <a href=" 
 
https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUm9fLVd2dVpuQ28" >Bogart Chapter 8 Solutions </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Bogart Digital to Analog Chapter</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGSjM4VDNuZ180VWM 
 
">An Introduction to Error Analysis </a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbUw2Y2RzeXQyYTQ">Basic of Electronics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdkNWZHJBbUY4WGM">Solution from Bogart Book</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUTdvN29GU0VoY0U">Least Square Solutions</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTY5RmtMLXFoWWs">Estimation of Error</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder3">Mathematical Physics</label> <input type="checkbox" id="subfolder3" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGd2NCWm5iMmluWVU">Tutorial One and Two</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVFFwc1VTeGVtVTA">Tutorial One and Two II</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGOFBkTmRLc1hVN1E">Tutorial 4</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeFN2Q2N6QjNnSTQ">Tutorial 3</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGNEE4ZG9zT2NKSG8">Curvature and Torison Curves</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdmJLVUFxMEdZU2M">Arfken Solution</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's tensor Analysis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbmEwM2ZrclF5ODA">George B. Arfken, Hans J. Weber, Manual_ Mathematical Methods for Physicists</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGRmdjUVpLaXN1UGM">Schaum's Tensor Calculus</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZjg1MDVYRWI0TW8">Vector space and Eigen Value</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcmMwT1FGUGFod0E">Vector in Functional space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVzVtWndjVktwTDg">Vector funtional Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdHFCbUVnOEp6RDQ">Orothonormal Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGbG9SQXd2RE1DWUk">Linear Vector Space</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGemNnQ3ZJZkhBV3c">Linear Transformation</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGWllDS0pBVFpQemc">Change of Basis</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZzZ2blRkclhhczg">Operators</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGdU9udFd5UzBZSVk">Operators</a></li> 
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder4">Quantum Mechanics</label> <input type="checkbox" id="subfolder4" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZllRR2pvTzdYVU0">Binil Sir Lecture (1-5) From Quantum Spin</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGcWFVcTdvejRoQjQ">Schaum's Series</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGeTBmSE94aDB5bEU">Basis and Dimension</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     <li> 
 
      <label for="subfolder5">Classical Mechanics</label> <input type="checkbox" id="subfolder5" /> 
 
      <ol> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGVEFmU0V4bGNiR1k">Non-Linear Dynamics</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGUkdOaEg0Mmdaa00">Goldstein Chp 8 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGZmVEZ2N1aEVwOE0">Goldstein Chp 9 Solutions Handwritten (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://drive.google.com/uc?export=download&id=0B2j3ckof7nFGT0pfWnhXZFNIQmc">Goldstein Chp 9 Solutions (BG Sir Homework)</a></li> 
 
      <li class="file"><a href="https://archive.org/download/arxiv-math-ph0012051/math-ph0012051_jp2.zip">Operator formalism of quantum mechanics</a></li> 
 
      
 
      </ol> 
 
     </li> 
 
     
 
    
 
    
 

 
</body> 
 
</html>

来源

2017-10-15 12:49:25 BlueYeti24

当href链接被点击在html页面的div内时显示加载文本或图像

回答

相关问题