2013-09-18 5 views
0

У меня есть огромная таблица php, и я хочу загрузить ее через AJAX, чтобы вставить gif для загрузки пользователю. Итак, я очень нуб с такой операцией, и я делаю очень простой код для выполнения этой задачи. Вот мой код:Gif не работает при загрузке внешней страницы

$(document).ready(function() { 
       $("#tableDiv").html('<center><img src="images/loader.gif" /></center>'); 
       $("#tableDiv").load("regulatoryData.php"); 
      }); 

Это нагружает GIF, но он не работает, он остается неизменным. Как я могу исправить? Любые предложения?

EDIT: Когда я перетаскиваю свое изображение в браузер, он оживляет нормально.

EDIT 2: Уит только

$("#tableDiv").html('<center><img src="images/loader.gif" /></center>');

МФП работает нормально, но когда я добавить вторую часть его начинает работать и только после того, как он останавливается и не остаются замораживают до regulatoryData появляется

EDIT 3: На самом деле я проверил, что это не зависающий gif, а весь браузер.

К сожалению о моем английском:/

+0

Если вы запрашиваете изображение непосредственно в своем браузере, значит, оно выполняется тогда? Если вы находитесь на мобильном устройстве, это может вызвать проблемы, поскольку не все мобильные браузеры поддерживают анимированные gifs – Tschallacka

+0

Можете ли вы перетащить изображение в окно браузера и подтвердить, что он оживляет? – michaelward82

+1

Этот вопрос действительно не имеет отношения к JavaScript, PHP, HTML или AJAX. Звучит скорее как проблема с вашим анимированным GIF. – j08691

ответ

0

Я бы рекомендовал что-то вроде следующего:

http://jsfiddle.net/NeFaz/1/

<a href="#" id="load">Load</a> 
<div id="myid"> 
</div> 

$(document).ready(function() { 
    $("#load").click(function() { 
     $('#myid').addClass('loading'); 
     $("#myid").load('http://www.confetti.co.uk/shop/', function() { 
      $('#myid').removeClass('loading'); 
     }); 
    }); 
}); 

#myid { 
    height: 500px; 
    width: 500px; 
} 
#myid.loading { 
    background-image: url('http://koikoikoi.com/wp-content/uploads/2012/07/RESET.gif'); 
} 

Это устанавливает изображение в качестве фона div, но только при применении класса. Мы начинаем без этого класса.

Нажав на ссылку загрузки, мы добавим класс загрузки в div и отобразится изображение bg. Функция, которая используется при загрузке, срабатывает при завершении загрузки и удаляет класс из div, поэтому удаляет изображение.

+0

Когда я использую \t \t \t \t '$ ("# tableDiv") HTML. ('

');' работает отлично ... но когда я добавляю $ ("# tableDiv"). Load ("normData.php"); начинает работать и перестает оставаться замороженным до тех пор, пока другая страница не загрузится – user2766117

+0

Какой веб-браузер? – michaelward82

+0

Firefox и Chrome – user2766117

0

Добавить в начале <BODY>

<img src="images/loader.gif" style="display:none" /> 

В качестве «предварительного загрузчика»

+0

Я думаю, что вы забыли написать остальную часть своего ответа. – Bojangles

+0

Нет. Я думаю, проблема заключается в следующем: конец ajax перед загрузкой gif. Затем вы можете поместить изображение с помощью «display: none», чтобы браузер загрузил его. С этим (я думаю) исходный код будет работать. – Falci

+0

Ты по-прежнему не слишком разбираешься. Изображение не загружается, не проблема - браузер висит – Bojangles

0

Я обнаружил, что IE останавливает анимацию в формате GIF при запуске загрузки новой страницы. Я решил это в одном из моих собственных проектов, добавив тайм-аут, который обновляет источник изображения 50 мс после того, как другая страница начнет загружаться, просто назначив ему одно и то же значение снова. В вашем случае это будет выглядеть примерно так:

$(document).ready(function() { 
      $("#tableDiv").html('<center><img src="images/loader.gif" /></center>'); 
      setTimeout(function() { $("#tableDiv img").attr("src", "images/loader.gif"); }, 50); 
      $("#tableDiv").load("regulatoryData.php"); 
     }); 
+0

На самом деле я проверил, что это не зависающий gif, а весь браузер. – user2766117

Смежные вопросы