Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 16.06.2015, 20:31
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Прелоадер без Jquery
Помогите, пожалуйста, советом.
Не могу никак сообразить как реализовать отсчет цифр от 0 до 100, пока грузится страница.
Сначала пришла идея сделать отсчет от 0 до 100 с определенным интервалом. А интервал пытался вычеслить через window.onload , но в итоге ничего путного не вышло.
В интернете есть куча прелоадеров на Jquery и даже на CSS. Но хочется самому написать на JavaScript
Помогите, пожалуйста, хотя бы советом, что зачем идет.
Ответить с цитированием
  #2 (permalink)  
Старый 16.06.2015, 22:35
Профессор
Отправить личное сообщение для Decode Посмотреть профиль Найти все сообщения от Decode
 
Регистрация: 31.01.2015
Сообщений: 576

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>
Ответить с цитированием
  #3 (permalink)  
Старый 16.06.2015, 23:33
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Спасибо, но нужно обязательно до 100
Ответить с цитированием
  #4 (permalink)  
Старый 16.06.2015, 23:51
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

Сообщение от qwe88
Не могу никак сообразить как реализовать отсчет цифр от 0 до 100, пока грузится страница.
никак.
Ответить с цитированием
  #5 (permalink)  
Старый 16.06.2015, 23:58
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Делают же прелоадеры процентные на Jquery. А как сделать на JS?
Возможно как-то частями подгружать?
Ответить с цитированием
  #6 (permalink)  
Старый 17.06.2015, 00:12
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,121

qwe88,
никак, ни на Jquery, ни на JS -- подумайте над чем нибудь другим.
Ответить с цитированием
  #7 (permalink)  
Старый 17.06.2015, 08:32
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Подскажите, пожалуйста, как сделана эта штука?
http://promocenter.com.ua/index.html
Ответить с цитированием
  #8 (permalink)  
Старый 17.06.2015, 09:00
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

qwe88,
Вы можете делать прелоадер и считать процент не от того на сколько страница загружена а от того сколько ваших компонентов загружено. Например я делал игру, в которой было много картинок, которые были необходимы для игры. И я делал прелоадер пока картинки не загрузятся. Получить процент загрузки каждой картинки нельзя (по крайней мере обычным способом), но можно считать процент от количества загруженных картинок. Конечно прелоадер при этом движется не равномерно из за того что картинки разного размера, но это похоже на то, что вам надо.
Ответить с цитированием
  #9 (permalink)  
Старый 17.06.2015, 09:12
Профессор
Отправить личное сообщение для tsigel Посмотреть профиль Найти все сообщения от tsigel
 
Регистрация: 12.12.2012
Сообщений: 1,398

Пример прелоадера одной картинки:
// показать прелоадер
var img = new Image();
img.src = 'image source';
img.onload = function () {
  // убрать прелоадер
};

Для большого количества картинок надо обернуть это в цикл и при каждой загрузке увеличивать процент.
Ответить с цитированием
  #10 (permalink)  
Старый 17.06.2015, 09:17
Аватар для qwe88
Кандидат Javascript-наук
Отправить личное сообщение для qwe88 Посмотреть профиль Найти все сообщения от qwe88
 
Регистрация: 14.06.2014
Сообщений: 137

Круто, спасибо огромное!
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Стили и классы без jQuery pifon Javascript под браузер 3 03.04.2014 21:35
Ни один скрипт и плагин не видит Jquery razorg1991 jQuery 5 30.03.2014 14:51
Динамически загружаемая jQuery и jQuery-функции в одном файле 67bytes Общие вопросы Javascript 6 06.03.2013 09:01
bind и unbind но без jquery syegorius Events/DOM/Window 1 04.12.2011 13:09
как с помощью jquery отсылать без перезагрузки... serhanters jQuery 11 22.07.2011 21:17