J'ai une URL qui ouvre une page Web très lente à charger et je n'ai aucun contrôle sur elle.
Je veux afficher une boîte de dialogue de chargement lorsque quelqu'un clique sur cette URL ou pour bloquer la page avec une superposition Lorsque cela se produit. p>
Remarque: Ceci n'est pas la même question que les éléments liés à AJAX, ceci pour les clics d'URL normaux forment l'utilisateur, pas tous uniquement ceux spécifiques. P>
<A href="http://veryslowload.com" onClick="...">slow load...</a>
9 Réponses :
Vous voudrez peut-être regarder dans des boîtes modales. Vous pouvez activer une boîte de modèle lorsque la demande AJAX est envoyée et sur le succès peut-être le fermer. https://www.google.com / Rechercher? SUGEXP = CHROME, MOD = 10 & SECTIONID = CHROME & IE = UTF-8 ET Q = MODAL + BOX
Vous pouvez le faire: démonstration (modifier le lien vers 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'aurez pas le temps de voir votre DIV. >
Je suis surpris que ça marche juste. Comme vous pouvez le constater sur ma réponse, j'ai supposé que le document ne serait jamais mis à jour à moins que vous ne soyez pas obligé de repeindre.
Cela ajoute simplement la DIV avant que le comportement de liaison normal ne soit déclenché. Le navigateur ne retire pas la page actuelle de l'affichage avant d'avoir quelque chose à afficher pour le nouveau.
Oui, il ne supprime pas la page actuelle, mais je pensais que l'opération de déchargement / charge bloquerait d'autres mises à jour, et ce n'est pas le cas.
Sachez que sur certains appareils / Browser Combo, cette chargementDiv peut toujours être visible lors de la navigation sur cette page à l'aide du bouton Backer Back? Ai-je raison?
Bien que AJAX soit plus élégant, c'est possible. Vous devez intercepter la navigation en empêchant l'événement par défaut, puis forcez une mise à jour à l'interface utilisateur, puis modifiez l'emplacement à l'URL de destination. Quelque chose comme ceci:
Vraisemblablement, vous souhaiterez que la boîte de dialogue de chargement apparaisse immédiatement, puis de disparaître et être remplacée par la nouvelle page lorsque la nouvelle page a rendu?
Trois idées viennent à l'esprit.
Si vous avez le contrôle de la page source mais pas la cible - utilisez un gestionnaire d'événements de clic pour remplacer le comportement normal des balises avec quelque chose comme ceci:
Cela peut devenir vraiment velu, car vous ne perdrez pas JavaScript et CSS défini dans la page d'origine. Il 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 que vous pouvez rendre la cible machable (même pendant quelques secondes): vous pouvez charger la page en arrière-plan via Ajax, puis rediriger. La première charge sera lente, puis la redirection chargera la page 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 un peu de JavaScript qui charge la Page actuelle.
Sauf que les demandes Ajax de domaine croisé ne sont généralement pas autorisées en raison de la même politique d'origine des navigateurs.
@David oh ouais. :( Est-ce que ce comportement bloque également le chargement des iframes croisés croisés? Parce que cela permettrait à Pseudo Ajax en utilisant un
Articles qui pourrait vous intéresser :
Impossible d'importer le module "@ angular / material"
Si vous n'avez aucun contrôle sur la page Web, comment vous comptez savoir quand cacher la boîte de dialogue de chargement?