Блог

Главная - Вопросы по программированию - как показать загружаемое изображение при вызове ajax

как показать загружаемое изображение при вызове ajax

#javascript #jquery #html #css #ajax

#javascript #jquery #HTML #css #ajax

Вопрос:

Мне нужно показать загружаемое изображение при вызове ajaz…. Я проделал некоторую работу над этим…. Но это не помогло…Он не показывает загружаемое изображение…. И я хочу заблокировать экран при загрузке изображения… мой ajax находится здесь, ниже…

 ----ajax---

function checkEmail(value_email_mobile) {

                 // before the request, show the GIF
                 //$('#loader').show();
                if (value_email_mobile !== '') {

                     //alert('te');
                    $.ajax({
                        type: "POST",
                        url: url_check_user_avail_status, 
                        data: "value_email_mobile=" value_email_mobile,
                        success: function(msg) {

                            //alert(msg);

                            //$('#psid').html("<img src='images/spacer.gif'>");
                              $('#loader').hide();
                            $('#validation').html(msg);


                            //

                            //$('#sid').sSelect({ddMaxHeight: '300px'});

                        },
                        error: function() {
                            //alert('some error has occured...');
                        },
                        start: function() {
                            //alert('ajax has been started...');
                             $("#loader").show();
                        }
                    });
                }
            } 

------html--

<div id="loader" style="display:none;"><img src="<wait.png" ></div>

Комментарии:

1. Это потому, что у вас опечатка в имени вашего изображения? <img src="<wait.png" >

2. Я думаю start , что это недопустимый параметр. Просто переместите $('#loader').show(); строку непосредственно перед вызовом AJAX.

Ответ №1:

Во-первых, ваш недопустимый тег изображения <img src="<wait.png" > должен выглядеть так <img src="wait.png"/>

Что касается загрузчика, в $.ajax есть опция, называемая beforeSend . Вы можете использовать его следующим образом:

                 $.ajax({
                    type: "POST",
                    url: url_check_user_avail_status, 
                    data: "value_email_mobile=" value_email_mobile,
                    beforeSend: function () {
                                    $("#loader").show();
                                },
                    success: function(msg) { // success code here
                         $("#loader").hide();
                     });

Ответ №2:

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

 if (value_email_mobile !== '') {

    $("#loader").show();

    $.ajax({
        type: "POST",
        url: url_check_user_avail_status, 
        data: "value_email_mobile=" value_email_mobile,
        success: function(msg) {
            $("#loader").hide();
        },
        error: function() {}
    })

   // ...

Ответ №3:

напишите, что этот код работает для всех запросов ajax на вашем веб-сайте.

 $( document ).ajaxStart(function() {
    $("#loader").show();
});

Затем напишите код остановки ajax.

 $( document ).ajaxStop(function() {
    $("#loader").hide();
});
Метки: