Показать обработку при загрузке изображения JQuery / Javascript

Question

У меня есть изображение, которое редактируется и перезагружается с новой строкой запроса, добавленной, чтобы удостовериться, что она использует кэшированную копию. Поскольку у Image уже есть источник изображения, и когда я меняю изображение, пользователь все еще видит старое изображение, и если изображение большое, он может подумать, что оно не выполняет обработку. Есть ли способ показать пользователю, что изображение загружается?

Answer 1

Заменить исходное изображение загрузочным сообщением:

function SomeImageChangeFunction()
{
    $('ProcessingImage').parent().text('loading...');
    $('ProcessingImage').attr('href', 'newURL');
}

Загрузка может быть анимированным GIF или что угодно.

Answer 2

У вас есть jquery?

При смене нового изображения его скрыть и показать div, содержащий загружаемое изображение / текст в той же позиции.Затем в изображении при загрузке повторно отобразите изображение и скройте div.

<img id="loadingimg" src="loading.gif"><img id="theimage" src="whatever-1.jpg" onload="imgloaded();" onchange="imgchanged();">

function imgchanged() {
     $('#theimage').css('display', 'none');
     $('#loadingimg').css('display', 'inline');
}

function imgloaded() {
     $('#loadingimg').css('display', 'none');
     $('#theimage').css('display', 'inline');
}