Отображение анимированного GIF-файла после нажатия на ссылку для перехода на медленную загрузку сторонней веб-страницы

Question

Мой сайт ссылается на страницу покупки прямо сейчас, которая загружается медленно.Я хотел бы отобразить анимированный GIF-файл после того, как пользователь щелкнет ссылку встраивания PayPal, пока не загрузится новая страница PayPal.

Заранее спасибо.

Answer 1

Я вижу, что вы пометили вопрос с помощью jQuery, что является отличным способом сделать это, как предложил Керри.

С jQuery это действительно просто:

$("#paypalLink").click(function(){
      $(".loading").show();
}

И ваш HTML будет выглядеть так

<a href="http://paypal.com/whateverelse" id="paypalLink">Pay with Paypal</a>
<img src="loading.gif" class="loading" />

Вы бы скрывали класс «загрузки» в вашем css, когда он загружает страницу (возможно, с display: none;), а затем отображали его с помощью jquery.

Есть несколько способов сделать это, просто примите это как отправную точку.

Для jQuery нажмите api, перейдите сюда => http://api.jquery.com/click/

Answer 2

Если вы хотите сделать это без JQuery ...

Предположим, у вас есть анимированное изображение на вашей странице, скрытое с помощью CSS (display: none;)

Затем по вашей ссылкевы бы сделали:

<a href="#" onclick="document.getElementById('loaderimage').style.display='';">Click Here</a>

<img src="loading.gif" id="loaderimage" alt="" style="display:none;" />

Answer 3

Используйте JavaScript, чтобы событие «onclick» либо заменяло изображение, либо добавляло новое изображение.Я предлагаю использовать jQuery либо .replaceWith('<img ...'), либо .append('<img ...')