web-dev-qa-db-fra.com

Comment afficher la boîte de dialogue de chargement lorsque quelqu'un clique sur un lien spécifique?

J'ai une URL qui ouvre une page Web qui est très lente à charger et je n'ai aucun contrôle sur celle-ci.

Je souhaite afficher une boîte de dialogue de chargement lorsque quelqu'un clique sur cette URL ou bloquer la page avec un div en superposition lorsque cela se produit.

Remarque: ce n'est pas la même question que celles liées à ajax, ceci concerne les clics d'URL normaux de l'utilisateur, pas tous ceux spécifiques.

<A href="http://veryslowload.com" onClick="...">slow load...</a>

Je suppose que ce que je cherche, c’est ce qu’il faut mettre sur le onClick.

javascriptjqueryloading
8
sorin

Tu peux le faire :

$(function(){
​  $('a').click(function(){
     $('<div class=loadingDiv>loading...</div>').prependTo(document.body); 
  });​
});

Démonstration (change le lien en une page très lente pour un meilleur effet)

Mais cela dépend de la page: si la page envoie immédiatement du contenu mais pas tout le contenu, vous n’avez pas le temps de voir votre div.

6
Denys Séguret

Si vous avez également besoin d'une animation, cela devient compliqué car les navigateurs se comportent très différemment. Certains arrêtent toutes les animations GIF quand une nouvelle page commence à se charger. En gros, cela revient à quelque chose comme ceci si vous avez jQuery et téléchargez la bibliothèque spin.js.

Voir la solution de travail ici :

http://jsfiddle.net/7aJyP/

<style>
#loading {
    display:none;
    position:absolute;
    left:0;
    top:0;
    z-index:1000;
    width:100%;
    height:100%;
    min-height:100%;
    background:#000;
    opacity:0.8;
    text-align:center;
    color:#fff;
}

#loading_anim {
    position:absolute;
    left:50%;
    top:50%;
    z-index:1010;
}
</style>



<div id="loading"><div id="loading_anim"></div></div>

<a href="http://pangoo.it" class="mylinkclass withanimation">link</a>



<script>

$(function () {
    $(".withanimation").click(function(e) {
        e.preventDefault();
        $("#loading").show();

        var url=$(this).attr("href");

        setTimeout(function() {
            setTimeout(function() {showSpinner();},30);
            window.location=url;
        },0);

   });
});

function showSpinner() {
    var opts = {
      lines: 15, // The number of lines to draw
      length: 3, // The length of each line
      width: 4, // The line thickness
      radius: 30, // The radius of the inner circle
      rotate: 0, // The rotation offset
      color: '#fff', // #rgb or #rrggbb
      speed: 2, // Rounds per second
      trail: 70, // Afterglow percentage
      shadow: false, // Whether to render a shadow
      hwaccel: false, // Whether to use hardware acceleration
      className: 'spinner', // The CSS class to assign to the spinner
      zIndex: 2e9, // The z-index (defaults to 2000000000)
      top: 'auto', // Top position relative to parent in px
      left: 'auto' // Left position relative to parent in px
    };
    $('#loading_anim').each(function() {
        spinner = new Spinner(opts).spin(this);
    });
}
</script>

Si vous utilisez une animation (GIF), l’animation peut se bloquer sur certains navigateurs. J'ai utilisé la bibliothèque spin.js ( http://fgnass.github.com/spin.js/ ). Bien que les fichiers GIF soient gelés, l’animation javascript semble fonctionner.

S'il vous plaît tester avec tous les navigateurs!

5
FrancescoMM

Bien que l'ajax serait plus élégant, c'est possible. Vous devez intercepter la navigation en empêchant l'événement par défaut, puis forcer une mise à jour de l'interface utilisateur, puis changer l'emplacement en l'URL de destination. Quelque chose comme ça:

$('#mylink').click(function(e) {
    e.preventDefault();
    var url = this.href;
    // Update the UI here
    setTimeout(function() {
        // This is a trick to force a repaint
        window.location.href = url;
    },0);
});
2
bfavaretto

Vraisemblablement, vous voudrez que la boîte de dialogue de chargement apparaisse immédiatement, puis disparaisse et soit remplacée par la nouvelle page lorsque la nouvelle page a été rendue?

Trois idées me viennent à l’esprit.

Si vous avez le contrôle de la page source mais pas de la cible - Utilisez un gestionnaire d'événements click pour remplacer le comportement normal des balises par un comportement similaire à celui-ci:

  1. Afficher l'animation de chargement
  2. Déclenche une requête AJAX sur l'URL définie par l'attribut href de la balise (vous pouvez également créer un masqué avec l'URL comme source)
  3. Une fois la demande terminée, remplacez le contenu du document par la réponse.

Cela peut cependant devenir très difficile, car vous ne perdrez pas le javascript et le css définis dans la page d'origine. Cela ne changera pas non plus l'URL affichée dans le navigateur de l'utilisateur. 

Si vous avez le contrôle de la cible et pouvez la rendre cacheable (même pendant quelques secondes): Vous pouvez charger la page en arrière-plan via AJAX, puis la rediriger vers celle-ci. Le premier chargement sera lent, puis la redirection chargera la page à partir du cache.

Et encore une autre alternative: Si vous avez le contrôle de la page cible, vous pouvez définir un paramètre facultatif tel que si le paramètre est présent, le serveur renvoie une page composée uniquement de l’animation de chargement et d’un peu de javascript qui charge la page réelle.

1
AmericanUmlaut

commencez par stocker spinner.gif dans votre formulaire et gardez-le caché . Mettez aussi src = ""

donc il n'y aura pas de SRC pour l'image

mais plus tard tout en faisant l'appel ajax, vous pouvez définir le src pour l'image spinner afin que votre page semble se charger

$(document).ready(function() {
            // bind 'myForm' and provide a simple callback function
               $("#tempForm").ajaxForm({
               url:'url to be called',
               type:'post',
               beforeSend:function()
               {
                   alert("this is the place where you place things to happen till your page is being transfered to the given URL so i am setting the src for the spinner image here");  
                   $("#spinner image ID").attr("src","../images/spinner.gif");
               },
               success:function(e){
               alert("do whatever you want with response here");
               }
        });
        });
0
Hussain Akhtar Wahid 'Ghouri'

Vous pouvez créer un iframe masqué et écouter l'événement de chargement. Vous aurez également besoin de faire une vérification manuelle après environ 1 seconde, au cas où la destination aurait empêché le contenu en x-frame.

DEMO: http://jsbin.com/ijofih/1

$('a').click(function(e) {
    $(this).text('Loading...'); // do your UI thing here
    e.preventDefault();
    var destination = this.href;
    setTimeout(function() {
        window.location = destination;
    },1000);
    $('<iframe>').hide().appendTo('body').load(function() {
        window.location = destination;
    }).attr('src', destination);
});
0
David Hellsing

Ceci est un vieux sujet, mais si vous voulez une solution simple qui ne dépend pas de JQuery, ajoutez ce qui suit à onClick dans votre lien:

<A href="http://veryslowload.com" onClick=""javascript:document.getElementById('page-loader').style.display='block';"">slow load...</a>

Ensuite, quelque part sur votre page, ayez une DIV cachée qui inclut ce que vous voulez pour la boîte de dialogue de chargement.

<div id="page-loader">
    <h3>Loading page...</h3>
</div>

et masquer la DIV avec CSS comme suit:

#page-loader {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
z-index: 10000;
display: none;
text-align: center;
width: 100%;
padding-top: 25px;
background-color: rgba(255, 255, 255, 0.7);
}

Voici un JSfiddle à un exemple de travail: http://jsfiddle.net/meb69vqd/

Je ne peux pas prendre tout le crédit pour cet exemple. Vous trouverez des conseils supplémentaires sur cette technique ici: https://css-tricks.com/css-page-loader/

0
Frank