Что такое хорошая техника для отображения изображения «Загрузка ...»?
-
04-10-2019 - |
Вопрос
Я работаю с div
это имеет любое количество img
элементы внутри него. Прямо сейчас каждый img
имеет следующие CSS:
#content > img {
display: none;
position: absolute;
top: 0px;
left: 0px;
}
И изображения могут быть накидками с функцией, которая показывает и скрывает их в свою очередь. Хотя каждое изображение загружается, однако я хотел бы отобразить изображение «Loading ...». Я хотел бы использовать JavaScript / jQuery, чтобы поменять источник каждого неполного изображения для изображения «Loading ...» пока все еще разрешаю это загрузить. Отказ Что же самое наклонное и средний способ сделать это?
Решение
$(function(){
$('<img>').attr('src','loading.gif'); // preload the "loading" image.
$('#content > img').each(function(){
var original = this.src;
var $this = $(this);
$this.attr('src','loading.gif'); // swap to loading image.
$('<img>').attr('src',original)// pre-load original.
.load(function(){
$this.attr('src',original); // swap it back when pre-load is done.
});
})
});
сумасшедший пример
Другие советы
Там есть плагин на изображений, который можно найти здесь: http://gist.github.com/268257.
Просто покажите изображение загрузки, свяжитесь с imagesLoaded
Событие и когда он срабатывает, скройте изображение загрузки.
ОБНОВИТЬ:
На самом деле, jQuery построил методы, чтобы обнаружить нагрузку сейчас: http://api.jquery.com/load-event/