Как отобразить изображение загрузки во время загрузки фактического изображения [дубликат]

этот вопрос уже есть ответ здесь:

иногда изображения потребуется некоторое время для отображения в браузере. Я хочу показать занятое изображение во время загрузки фактического изображения, а когда изображение загружено, занятое изображение удаляется и фактическое изображение должно быть показано. Как я могу сделать это с помощью JQuery или любого javascript?

5 76
jquery

5 ответов:

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

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

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

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

90

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

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

Я использую аналогичную технику, что @ 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, чтобы изменить класс изображения, чтобы он отображал фоновое изображение ошибки (а не значок сломанного изображения браузера).

11

вместо того, чтобы просто делать этот цитируемый метод из https://stackoverflow.com/a/4635440/3787376,

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

// 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.

2

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

0