Mon site liens vers un paypal acheter maintenant la page qui se charge lentement. Je voudrais afficher un gif animé après que l'utilisateur clique sur le lien intégré de paypal jusqu'à ce que la nouvelle page paypal se charge.Afficher gif animé après avoir cliqué sur le lien pour aller à une page Web de chargement lent
Merci d'avance.
Je vois que vous avez étiqueté la question avec jQuery, ce qui est une excellente façon de le faire comme Kerry suggéré.
Avec jQuery ce qui est vraiment simple:
$("#paypalLink").click(function(){
$(".loading").show();
}
Et votre code html ressemblera à ceci
<a href="http://paypal.com/whateverelse" id="paypalLink">Pay with Paypal</a>
<img src="loading.gif" class="loading" />
Vous souhaitez masquer la classe "chargement" dans votre css quand il chargement de la page (peut-être avec display: none;), puis montrez-le avec la jquery.
Il y a plusieurs façons de faire cela, prenez-le comme point de départ.
Pour le clic jQuery api allez ici =>http://api.jquery.com/click/
Comment chargez-vous la page paypal? Vous devriez le charger dans un iframe (que je ne pense pas que paypal permettrait - je vérifierais) pour rester sur la même page. Sinon, une fois que l'utilisateur clique sur le lien, il ira à Paypal pendant le chargement et vous n'aurez pas le contrôle sur leur site, bien sûr. – jonkratz
@JohnKratz +1, rochers jquery, je pense que le problème de "l'attente" est en raison de la lenteur dns? .. sur la note de côté: google fournir dns rapide. 8.8.8.8, 8.8.4.4 – iamgopal
Utilisez javascript pour que l'événement "onclick" remplace l'image ou ajoute une nouvelle image. Je suggère d'utiliser jQuery soit .replaceWith('<img ...')
Si vous voulez faire cela sans JQuery ...
Supposons que vous avez l'image animée sur votre page cachée avec CSS (affichage : none;)
ensuite sur votre lien vous feriez:
<a href="#" onclick="document.getElementById('loaderimage').style.display='';">Click Here</a>
<img src="loading.gif" id="loaderimage" alt="" style="display:none;" />
@Sherri ... j'ai essayé votre code pour l'application web mobile, son navigateur de travail iOS safari, mais quand j'ai essayé le navigateur android par défaut son ne fonctionne pas, si essayer chrome mobile navigateur son travail bien, toute solution pour le travail, il est également le navigateur Web Android par défaut. et même chrome ou iOs safari ou navigateur de bureau lorsque nous cliquons sur le lien de chargement de l'image de travail, mais quand nous pressons le bouton précédent ou retour page précédente ce fichier gif animé fonctionne encore là ... comment le cacher quand nous revenons à la page précédente. Merci.. – mans
Où vous chargez la page PayPal? Est-ce dans une nouvelle fenêtre ou quelque chose? –