Как я отображаю gif анимацию пользователю, в то время как изображение загружается (в сети)?

Проблема: у Меня есть набор изображений, когда пользователь нажимает на одном из них, это, растут до области на странице. Обмен изображениями сделан с помощью js. Изображение, весят о 0.5M, поэтому это - взятие приблизительно 3 секунды, пока изображение не, показал. Я хотел бы представить тип анимации, в то время как изображение не отображено. Как я могу сделать это с помощью js?

6
задан Alon Ashkenazi 1 March 2010 в 23:33
поделиться

3 ответа

Используйте событие 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");
    });
});
1
ответ дан 17 December 2019 в 07:03
поделиться

Вставьте элемент-заполнитель и прикрепите обратный вызов события 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();
});
1
ответ дан 17 December 2019 в 07:03
поделиться

Всегда есть тег "marquee" с сообщением "loading", который вы отключаете, как только ваше изображение будет заменено. Конечно, даже я снизил бы баллы тому, кто выступает за "marquee".

2
ответ дан 17 December 2019 в 07:03
поделиться
Другие вопросы по тегам:

Похожие вопросы: