Загрузка изображения иногда не появляется

В моей системе у меня есть php-файл, который обрабатывает транзакцию, а затем отправляет форму по почте. И иногда это занимает около 10 секунд. Поэтому я поместил в него загрузочный GIF (размером менее 100 КБ), который будет отображаться, пока пользователь ожидает его завершения. Проблема в том, что иногда транзакции завершаются так быстро, что изображение не успевает появиться. И когда gif не загружается, он показывает пространство изображения как неработающую ссылку, поэтому это выглядит как ошибка.

HTML:

<div class="content_animated">
<img src="../images/ra_loading.gif" alt="Aguarde..processando seu pagamento..." title="Aguarde..processando seu pagamento..." />
</div>

CSS:

.content_animated{
    position:absolute;
    width:436px;
    height:38px;
    top:50%;
    left:50%;
    margin-left:-218px;
    margin-top:-16px;
}

Можно ли заставить его загрузить или установить задержку, чтобы дать время для загрузки GIF? Я новичок в программировании, так может кто-нибудь помочь мне в этом?

Источник

2 ответа

Решение

Вы можете увидеть, как я предварительно загрузил изображение с помощью JavaScript

<html>
   <head>
      <script language = "JavaScript">
         function preloader() 
         {
         loadingImage = new Image(); 
         loadingImage.src = "../images/ra_loading.gif";
         }
      </script>
   </head>
   <body onLoad="javascript:preloader()">
      <!--call for Javascript to preload the image-->
      <img src="../images/ra_loading.gif" alt="Aguarde..processando seu pagamento..."    title="Aguarde..processando seu pagamento..." />
   </body>
</html>
Источник

Вы можете добавить один onload слушатель в image tag, который будет вызываться при загрузке изображения. Таким образом, вы можете изменить видимость тега, например:

<img id="a" onload="this.style.display='block'" style="diplay:none" src="yourimage.gif"/>
Источник
Другие вопросы по тегам