Как отображать загружаемое изображение при загрузке фактического изображения

Ответ 1

Вы можете сделать что-то вроде этого:

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

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

Ответ 2

Просто добавьте фоновое изображение для всех изображений с помощью css:

img {
  background: url('loading.gif') no-repeat;
}

Ответ 3

Я использую подобную технику для публикации @Sarfraz, но вместо того, чтобы скрывать элементы, я просто манипулирую классом загружаемого изображения.

<style type="text/css">
.loading { background-image: url(loading.gif); }
.loaderror { background-image: url(loaderror.gif); }
</style>
...
<img id="image" class="loading" />
...
<script type="text/javascript">
    var img = new Image();
    img.onload = function() {
        i = document.getElementById('image');
        i.removeAttribute('class');
        i.src = img.src;
    };
    img.onerror = function() {
        document.getElementById('image').setAttribute('class', 'loaderror');
    };
    img.src = 'http://path/to/image.png';
</script>

В моем случае иногда изображения не загружаются, поэтому я обрабатываю событие onerror, чтобы изменить класс изображения, чтобы он отображал фоновое изображение ошибки (а не значок сломанного изображения браузера).

Ответ 4

Вместо того, чтобы просто делать этот цитируемый метод из fooobar.com/questions/75181/...,

Вы можете сделать что-то вроде этого:

// show loading image
$('#loader_img').show();

// main image loaded ?
$('#main_img').on('load', function(){
  // hide/remove the loading image
  $('#loader_img').hide();
});

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

вы можете использовать другую функцию jQuery, чтобы убрать изображение загрузки, а затем быть скрытым:

// Show the loading image.
$('#loader_img').show();

// When main image loads:
$('#main_img').on('load', function(){
  // Fade out and hide the loading image.
  $('#loader_img').fadeOut(100); // Time in milliseconds.
});

"Как только непрозрачность достигнет 0, свойство стиля отображения будет равно none." http://api.jquery.com/fadeOut/

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

Ответ 5

Используйте конструктор javascript с обратным вызовом, который запускается, когда изображение закончит загрузку в фоновом режиме. Просто использовал его и отлично работает для меня в кросс-браузере. Здесь поток с ответом.