Прелоадер без Jquery
Помогите, пожалуйста, советом.
Не могу никак сообразить как реализовать отсчет цифр от 0 до 100, пока грузится страница. Сначала пришла идея сделать отсчет от 0 до 100 с определенным интервалом. А интервал пытался вычеслить через window.onload , но в итоге ничего путного не вышло. В интернете есть куча прелоадеров на Jquery и даже на CSS. Но хочется самому написать на JavaScript Помогите, пожалуйста, хотя бы советом, что зачем идет. |
qwe88, а если так?
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style>
.preload {
font-size: 3em;
}
</style>
</head>
<body>
<div class="preload"></div>
<iframe src="http://javascript.ru" frameborder="0"></iframe>
<iframe src="http://javascript.ru/forum/" frameborder="0"></iframe>
<iframe src="http://javascript.ru" frameborder="0"></iframe>
<script>
var preload = document.getElementsByClassName('preload')[0], i = 0;
var timer = setInterval(function() {
preload.innerHTML = i++ % 100;
}, 100);
window.onload = function() {
clearInterval(timer);
preload.innerHTML = 'Страница полностью загружена';
};
</script>
</body>
</html>
|
Спасибо, но нужно обязательно до 100
|
Цитата:
|
Делают же прелоадеры процентные на Jquery. А как сделать на JS?
Возможно как-то частями подгружать? |
qwe88,
никак, ни на Jquery, ни на JS -- подумайте над чем нибудь другим. |
Подскажите, пожалуйста, как сделана эта штука?
http://promocenter.com.ua/index.html |
qwe88,
Вы можете делать прелоадер и считать процент не от того на сколько страница загружена а от того сколько ваших компонентов загружено. Например я делал игру, в которой было много картинок, которые были необходимы для игры. И я делал прелоадер пока картинки не загрузятся. Получить процент загрузки каждой картинки нельзя (по крайней мере обычным способом), но можно считать процент от количества загруженных картинок. Конечно прелоадер при этом движется не равномерно из за того что картинки разного размера, но это похоже на то, что вам надо. |
Пример прелоадера одной картинки:
// показать прелоадер
var img = new Image();
img.src = 'image source';
img.onload = function () {
// убрать прелоадер
};
Для большого количества картинок надо обернуть это в цикл и при каждой загрузке увеличивать процент. |
Круто, спасибо огромное!
|
| Часовой пояс GMT +3, время: 01:52. |