Affichage du chargement du texte ou de l'image lorsque vous cliquez sur le lien href à l'intérieur de div de la page html

Je crée un site Web avec des tonnes de notes et de livres à télécharger. Je voudrais montrer n'importe quelle image ou n'importe quel texte quand le lien est le lien de téléchargement est cliqué et quand la demande est complète et le fichier commence à télécharger, alors retirez l'image ou en chargeant le texte. J'ai rencontré beaucoup de forums mais je n'ai trouvé aucune solution.Affichage du chargement du texte ou de l'image lorsque vous cliquez sur le lien href à l'intérieur de div de la page html

Voici la mine fichier html de

<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>

Toute aide serait beaucoup appréciée.

Source

2017-10-15 BlueYeti24

L'événement click est gérée par le jquery .on("click",function(){}), mais nous ne pouvons pas gérer lorsque le téléchargement du fichier fini, mon information est basée sur cette question Stackoverflow: 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>

Source

2017-10-15 10:31:43

Ici, j'ai modifié votre code et maintenant la solution de travail est,

<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>

Mais il ne reviendra pas au texte d'origine et restera bloqué pour toujours lors du chargement.

Source

2017-10-15 11:53:46 BlueYeti24

J'ai effectué ma réponse et cela fonctionne, s'il vous plaît si elle aide à se rappeler de cliquer sur le ** Coche ** sur le côté gauche de ma réponse, de l'approuver. Nous allons aider les autres utilisateurs qui ont le même problème que vous à trouver la solution. Meilleures salutations –

@MehdiBouzidi Merci ..C'était exactement ce dont j'avais besoin. Une dernière question ... Comment changer la taille de la police et la couleur de la police de texte. Et si je veux charger Chargement Gif Au lieu de la même quantité de temps ..Comment devrais-je faire ?? Par exemple, si je veux un gif d'ici pour la même quantité de temps https://projects.lukehaas.me/css-loaders/ Comment dois-je faire cela – BlueYeti24

Encore une fois, j'ai édité ma réponse vérifier pour voir le résultat :) Bonne Chance –

Ici, j'ai trouvé une autre solution pour charger gif à la place, ce qui serait une meilleure alternative, mais le problème est qu'il ne disparaîtra pas et continuera à charger. Comment puis-je faire pour terminer et revenir à l'état d'origine après un certain temps.

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

Source

2017-10-15 12:49:25 BlueYeti24

Affichage du chargement du texte ou de l'image lorsque vous cliquez sur le lien href à l'intérieur de div de la page html

Répondre

Questions connexes