Проблема: у Меня есть набор изображений, когда пользователь нажимает на одном из них, это, растут до области на странице. Обмен изображениями сделан с помощью js. Изображение, весят о 0.5M, поэтому это - взятие приблизительно 3 секунды, пока изображение не, показал. Я хотел бы представить тип анимации, в то время как изображение не отображено. Как я могу сделать это с помощью js?
Используйте событие load, что-то вроде:
$("img.something").click(function() {
$(".someDiv").html('<img src="loading.gif"/>');
var $img = $('<img src="bigImage.jpeg" style="display:none"/>');
$img.load(function() {
// once the loading has completed
$(".someDiv").html($(this));
$(this).fadeIn("slow");
});
});
Вставьте элемент-заполнитель и прикрепите обратный вызов события onload к элементу
. С jQuery,
var imageElem = $('<img />'),
placeholder = $('<div class="loading">Loading...</div>');
imageElem.attr('src', 'http://example.com/big_image.jpg');
$('#images').append(placeholder).append(imageElem);
imageElem.hide().load(function() {
placeholder.remove();
imageElem.fadeIn();
});
Всегда есть тег "marquee" с сообщением "loading", который вы отключаете, как только ваше изображение будет заменено. Конечно, даже я снизил бы баллы тому, кто выступает за "marquee".