Блог

Это очень простая вещь, которую я хочу сделать, при изменении функции я хочу, чтобы загружаемый div был виден, и через ajax-запрос я заполняю содержимое. Теперь дело в том, что загрузка div не работает в функции изменения, однако она работает в функции успеха ajax, я не знаю, где я совершаю свою ошибку. Пожалуйста, взгляните на мой код.

 <script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script>
$(document).ready(function(){
$('#sub').change(function(){
    $('.autoload').empty();
    $('.loading').show(); // Here it doesn't work
    var val=$(this).val();
    $(this).value= val;
    if(val=='One'){
        var sub_cat=11;
    }
    else if(val=='Two'){
        var sub_cat=12;
    }
    else{
        var sub_cat=13;
    }
    var cat_id= <?php echo $cat_id; ?>;
    $.ajax({
        type: "POST",
        url: "ajax_showsubdiv.php",
        data: {cat_id:cat_id,sub_cat:sub_cat},
        success: function(option){
            $('.loading').show(); // Here it's working
            $('.autoload').replaceWith(option);
            flag=false;
        }
    });
    $('.loading').hide();
});
});
</script>
 

HTML

 <div class='autoload'></div>
<div class='loading'>
    <img src='acz.gif'>
</div>
 

Все работает нормально, данные поступают нормально, отлично заменяются, единственное, требуется время, чтобы показать, что загрузка div, потому что она находится в функции успеха, поэтому только после завершения ajax-запроса отображается div.
Кто-нибудь может сказать, почему это не работает?

Оператор $('loading').hide(); в нижней части функции изменения выполняется и скрывает элемент почти сразу после вызова $('loading').show(); . Поскольку AJAX является асинхронным, браузер не ожидает $.ajax() завершения вызовов перед продолжением выполнения. Попробуйте удалить это утверждение.