Отслеживание курсора от «wait» до «auto», когда jquery выполняет функцию

Question

У меня есть функция jQuery, которая генерирует QR-коды и передает их в пустой тег IMG. код работает отлично, единственная проблема заключается в том, что для генерации этого кода требуется несколько секунд. Таким образом, мне в основном нужен курсор для отображения знака занятости во время выполнения функции и возврата к нормальному состоянию после того, как сгенерированный код будет загружен в пустой тег img.

Моя проблема в двух слотах.

Вопрос 1

Я не могу получить мышь, чтобы изменить занятом знак. Я попытался, используя следующий код CSS без толку:

$('body').css({'cursor':'wait'}); 

Вопрос 2

Как я могу получить код, чтобы узнать, когда QR-код был создан и затем вернуть браузер нормально? Я подозреваю, что наилучшим способом было бы запустить проверку, чтобы увидеть, когда тег изображения был передан значениям, а затем вернуть курсор в нормальное состояние.

Я прилагаю мой код ниже:

пустой тег изображения:

<img id="qr-code-image" src="" style="vertical-align: middle" /> 

Функция JQuery:

$('#link-types input[type=radio]').click(function() { 
    $('#qr-code-image').attr('src', ''); 
}); 

    $('#link-types input[type=radio]').click(function() { 

    if (!$("input[class='link-selector-bespoke']").is(':checked')) { 
    var url = $('#link-flash').text(); 
    $('body').css({'cursor':'wait'}); 
    } 
    else 
    { 
    var url = $('#link-bespoke').text(); 
    }   
    var encodedvalues = jQuery.base64Encode(url); 

    var imgUrl = '<?= $this->baseUrl() ?>/scripts/qr/t/' + encodedvalues; 

$('#qr-code-image').attr('src', imgUrl); 
    $('body').css({'cursor':'default'}); 
}); 

Answer 1

Используйте функцию OnLoad обратного вызова события из изображение:

$('#qr-code-image').off('load').on('load',function(){ 
    if(this.complete) 
      $('body').css({cursor:'default'}); 
}).attr('src', imgUrl);