Показать внешнюю страницу и загрузить gif в div

Question

Я могу получить div для отображения содержимого внешней страницы, но загрузочный gif не будет отображаться. Может кто-нибудь, пожалуйста, исправьте мой код. ТИА

<a href="javascript:void(0);" id="load-extmsg">blah</a>

<script type="text/javascript">
$(document).ready(function(){
$('#load-extmsg').click(function(){
    $("#extmsg").load("blah.php", function(){
        $("#ajaxLoader1").remove();
    });
});
</script>

<div id='extmsg'><img src="/images/ajaxLoader2.gif" id="ajaxLoader1"/></div>

Ниже приведен правильный код после небольшой проб и ошибок:

<a href="javascript:void(0);" id="load-extmsg">blah</a>

<script type="text/javascript">
$(document).ready(function(){
$('#load-extmsg').click(function(){
$("#ajaxLoader1").show();
    $.post('blah.php', function(data){
         $("#ajaxLoader1").remove();;
         $("#extmsg").append(data);
    })
});
});
</script>

<div id='extmsg'><img src="/images/ajax-loader2.gif" id="ajaxLoader1" style="display:none;" /></div>

Answer 1

Здесь я не вижу проблем.

Вы загружаете поверх загрузчика.

Попробуйте вместо этого сделать что-то вроде этого:

$('#load-extmsg').click(function(){
    $("#ajaxLoader1").show();
    $.post('blah.php', function(data){
         $("#ajaxLoader1").hide();
         $("#extmsg").append(data);
    })
});

Добавьте несколько CSS кскрыть изображение загрузки:

#ajaxLoader1 {
    display: none;
}

Answer 2

Я бы также удостоверился, что путь к изображению действителен (проверка работоспособности)

Не могли бы вы также проверить, действительно ли загружаемое изображение (ajaxLoader2.gif) отображается на странице после щелчка.Просто проверьте элемент в FireFox (w / firebug)

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

Спасибо