Есть ли у вас Ajax идеи загрузки изображений для использования с jQuery?

Question

У меня страница загружается с помощью jQuery. Начальная загрузка включает в себя 100 записей с 6 значками на запись. Излишне говорить, что загрузка занимает несколько секунд, и я хочу дать пользователю подсказку / анимацию загрузки.

Есть идеи?

Answer 1

http://www.ajaxload.info/ - отличный ресурс для создания анимированных GIF-файлов для такого рода вещей.

Как только вы получите анимацию, визуализируйте ее как часть страницы; запустите механизм загрузки jQuery для события onload () анимации (так что вы уверены, что анимация была загружена первой) и используйте обратный вызов в конце последовательности загрузки, чтобы отключить / скрыть анимированный GIF.

Answer 2

У Мэтта Берсета есть хороший способ сделать это на основе jQuery .

Answer 3

Еще один ресурс для загрузки изображений: http://www.loadinfo.net/

Answer 4

Вы можете сделать анимацию в CCS3, например, если вы хотите пульс:

HTML-разметка:

<div class="pulse"></div>

CSS:

.pulse {
    width: 32px;
    height: 32px;
    margin: 25% auto;
    background-color: #303030;
    -webkit-border-radius: 16px;
    -moz-border-radius: 16px;
    -ms-border-radius: 16px;
    -o-border-radius: 16px;
    border-radius: 16px;
    -webkit-animation: scaleout 1.0s infinite ease-in-out;
    animation: scaleout 1.0s infinite ease-in-out;
}
@-webkit-keyframes scaleout{
    0%{
        -webkit-transform:scale(0)
    }
    100%{
        -webkit-transform:scale(1);
        opacity:0
    }
}
@-moz-keyframes scaleout{
    0%{
        -moz-transform:scale(0)
    }
    100%{
        -moz-transform:scale(1);
        opacity:0
    }
}
@-ms-keyframes scaleout{
    0%{
        -ms-transform:scale(0)
    }
    100%{
        -ms-transform:scale(1);
        opacity:0
    }
}
@-o-keyframes scaleout{
    0%{
        -o-transform:scale(0)
    }
    100%{
        -o-transform:scale(1);
        opacity:0
    }
}
@keyframes scaleout{
    0%{
        transform:scale(0);
        -webkit-transform:scale(0)
    }
    100%{
        transform:scale(1);
        -webkit-transform:scale(1);
        opacity:0
    }
}

Или вы можете создать div с внутренним изображением или фоновым изображением, у вас есть здесь несколько идей для анимации, его можно загрузить бесплатно, наслаждайтесь.

Answer 5

Вы можете настроить глобальное событие ajax, чтобы показать / скрыть значок загрузки. Посмотрите на: http://docs.jquery.com/Ajax_Events

Answer 6

Каждый раз, когда мне нужно что-то подобное, я заменяю элемент, который будет загружен, на простой, центрированный анимированный GIF-файл с надписью «Идет загрузка, подождите» или подобное сообщение. Если это займет всего несколько секунд, индикатор прогресса, вероятно, излишний, но простая анимация дает большинству людей уверенность в том, что ваш сайт все еще работает.

Answer 7

Вы можете отобразить div с анимированным GIF-изображением в качестве приглашения при загрузке. Именно так я и делал в прошлом.