Модераторы: Sardar, Aliance

Поиск:

Ответ в темуСоздание новой темы Создание опроса
> Прелоад картинок средствами js! 
:(
    Опции темы
IDVsbruck
Дата 30.5.2008, 22:46 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Ок, только предложу твой код с оптимизацией:

Код
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
      <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
            <meta http-equiv="Content-Language" content="en-us">
            <title>Title block</title>
            <script type="text/javascript">
                  var img_srcs = ["aaa", "bbb", "ccc", "ddd", "eee", "fff", "ggg", "hhh", "iii", "jjj"], img_counter = img_srcs.length;
                  function preload() {
                        for (var i in img_srcs) {
                              var image = document.createElement("img");
                              image.setAttribute("src", img_srcs[i]);
                              image.id = "img" + i;
                              image.readyState == "complete" ? checkLoadingImages() : image.onload = checkLoadingImages;
                        }
                  }
                  function checkLoadingImages() {
                        if (--img_counter == 0)
                              for (var i = 0 in img_srcs)
                                    document.body.appendChild(document.getElementById("img" + i));
                  }
                  window.onload = preload;
            </script>
      </head>
      <body>
      </body>
</html>


...ну уж больно я люблю компактные решения ... smile
PM MAIL   Вверх
AKS
Дата 31.5.2008, 07:36 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(IDVsbruck @  30.5.2008,  22:46 Найти цитируемый пост)
...код с оптимизацией

Такой (for (var i = 0 in img_srcs)) оптимизации я еще не встречал. smile

PM MAIL   Вверх
Frantishik
Дата 31.5.2008, 08:26 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 10
Регистрация: 24.12.2007

Репутация: нет
Всего: нет



IDVsbruck, спасибо огромное за чёткий код.Вы не правы насчёт заинтересованости....я думаю что многие сталкиваюся с такой проблемой.
да, это действительно именно то решение которое чаще всего нужно, а именно загрузить все картинки до показа самого сайта и к тому же таким образом легко манипулировать загрузкой документа(показом разных div и т.д.).
к сожалению я не смог поучаствовать в дисскусии, но решение проблемы сделал аналогичным
1функция создаёт обьекты
2функция проверяет наличие файла в кеше браузера
не один из примеров на всём форуме по предзагрузке картинок не работает!
обычно в примерах идёт просто создание обьектов-этого мало!
так что этот топик можно смело переносить в документацию.
Всем СПАСИБО за помощь и проявленный интерес. Я думаю докопались до истины!
PM MAIL   Вверх
AKS
Дата 31.5.2008, 09:50 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(Frantishik @  31.5.2008,  08:26 Найти цитируемый пост)
...это действительно именно то решение которое чаще всего нужно, а именно загрузить все картинки до показа самого сайта...

Цитата(IDVsbruck @  30.5.2008,  22:46 Найти цитируемый пост)
window.onload = preload;
???


PM MAIL   Вверх
IDVsbruck
Дата 31.5.2008, 13:16 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Цитата(AKS @ 31.5.2008,  07:36)
Цитата(IDVsbruck @  30.5.2008,  22:46 Найти цитируемый пост)
...код с оптимизацией

Такой (for (var i = 0 in img_srcs)) оптимизации я еще не встречал. smile

Чисто техническая помарка - я просто переделывал код Гирика и пропустил ляп. Надеюсь, меня из-за этого не  четвертуют ...

Добавлено через 53 секунды
Цитата(AKS @ 31.5.2008,  09:50)
window.onload = preload;

А тут что не понравилось?
PM MAIL   Вверх
Frantishik
Дата 31.5.2008, 14:24 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 10
Регистрация: 24.12.2007

Репутация: нет
Всего: нет



AKS, всё довольно просто:
1.выносим скрипт в конец документа
2.Помещаем контент в div и делаем его невидимым в стиле. 
3.В конце обхода массива  картинок в функции preload делаем видимым 
Код

function preload() {
 for (var i in img_srcs) {
    var image = document.createElement("img");
    image.setAttribute("src", img_srcs[i]);
    image.id = "img" + i;
    image.readyState == "complete" ? checkLoadingImages() : image.onload = checkLoadingImages;
  }
[U]document.getElementById("контент").style.display =''; [/U]
  }

В этом месте можно вызвать любую функцию и будет гарантия, что на момент её выполнения все картинки из массива уже загружены...
PM MAIL   Вверх
AKS
Дата 31.5.2008, 15:12 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(IDVsbruck @  31.5.2008,  13:16 Найти цитируемый пост)
 Надеюсь, меня из-за этого не  четвертуют ...

Да нет, конечно! ;) Ни кто не желает надругаться над Вами за такой ляп. Также, как, к примеру, за такой:
Код

document.body.appendChild(document.getElementById("img" + i)); // 20-я строка вашего поледнего сниппета


Цитата(Frantishik @  31.5.2008,  14:24 Найти цитируемый пост)
AKS, всё довольно просто:

Только не в случае с тем куском кода, который Вы цитируете.

Цитата(Frantishik @  31.5.2008,  14:24 Найти цитируемый пост)
...будет гарантия, что на момент её выполнения все картинки из массива уже загружены...

Вы считаете, что к моменту, когда управление покинет цикл for (var i in img_srcs), изображения "гарантировано" будут загружены? Вы ошибаетесь.
Кстати, изображения могут вообще не загрузиться...

Добавлено через 47 секунд
Цитата(IDVsbruck @  31.5.2008,  13:16 Найти цитируемый пост)
А тут что не понравилось?

Это по-поводу: "загрузить все картинки до показа самого сайта"...
PM MAIL   Вверх
IDVsbruck
Дата 31.5.2008, 17:05 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



document.body.appendChild(document.getElementById("img" + i)); - и что нам не нравится? Хотя я считаю, что добавление к боди не нужно, как настаивает мой оппонент, но с точки зрения синтаксиса строка правильная.

Цитата(AKS @  31.5.2008,  15:12 Найти цитируемый пост)
Вы считаете, что к моменту, когда управление покинет цикл for (var i in img_srcs), изображения "гарантировано" будут загружены? Вы ошибаетесь.

Управление покинет цикл практически мгновенно (в нашем человеческом времяисчислении), а картинки когда загрузятся, тогда и загрузятся. По крайней мере код так и работает - или грузим, или они уже есть в кеше.

Что-то я не понимаю интонаций АКС ... Хотя могу предположить, что почти каждый из нас в глубине души считает себя гуру smile

Добавлено через 4 минуты и 44 секунды
Да, кстати, повторюсь для тех, кто все-таки читает только последний пост и не читает всей темы: помочь на форуме - это не разжевать задачу, а дать идею. Лично я отношусь именно к таким "советчикам". А если кто-то собирается буквально воспринимать все написанное и, к примеру, вставит код типа for (var i = 0 in array) и будет пытаться его юзать, то он либо дилетант либо дурак.
PM MAIL   Вверх
AKS
Дата 31.5.2008, 17:21 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Участник форума
**


Профиль
Группа: Участник
Сообщений: 725
Регистрация: 20.9.2006

Репутация: 27
Всего: 52



Цитата(IDVsbruck @  31.5.2008,  17:05 Найти цитируемый пост)
document.body.appendChild(document.getElementById("img" + i)); - и что нам не нравится?

Откуда возьмется document.getElementById("img" + i), если изображения не были добавлены в структуру документа?
Цитата(IDVsbruck @  31.5.2008,  17:05 Найти цитируемый пост)
Управление покинет цикл практически мгновенно (в нашем человеческом времяисчислении), а картинки когда загрузятся, тогда и загрузятся.

То, что Вы комментируете, было написано для Frantishik'а, который надеялся, что после цикла изображения будут загружены (мне это не надо объяснять).
Цитата(IDVsbruck @  31.5.2008,  17:05 Найти цитируемый пост)
Что-то я не понимаю интонаций АКС

А какие Вы увидели "интонации"? 
Вижу надпись "код с оптимизацией", смотрю, что это за "оптимизация", пишу, что "оптимизации" на самом деле нет, более того, есть ошибки. Это все - ни больше, ни меньше. 
Цитата(IDVsbruck @  31.5.2008,  17:05 Найти цитируемый пост)
помочь на форуме - это не разжевать задачу, а дать идею.

Каждому - свое.


Это сообщение отредактировал(а) AKS - 31.5.2008, 17:24
PM MAIL   Вверх
Ghirik
Дата 31.5.2008, 23:38 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Цитата

помочь на форуме - это не разжевать задачу, а дать идею. 


В этом Вы малость ошибаетесь. Давайте разберемся, для кого и что является помощю. Обычно, по первому посту можно сразу оценить уровень знаний вопрошающего. 
Если он запинается в синтаксисе (таких более 50%), то на кой бес ему ваши советы? smile  Просто показать, что я мол знаю? Ну знаешь - и ладно... чего мусорить то... Таким желательно положить ответ в полностью готовом виде, как говорится от <html> до </html>. Это, действительно, будет помощь. И не думайте, что дать готовое решение, значит навредить балбесу. Напротив, если бы сеть не кишила от огромного количества готовых решений ни Вы ни я ни хрена бы не понимали в JavaScript-е. Пускай он тупо скопирует ваше решение, но даже у самого закореннелого лентяя в бестолковке что-то осядет. 
А если, нужна идея, то обычно люди так и пишут - "Нужна идея, в каком направлении двинуться?" Вот тут то и нужно включать идейный генератор и измеритель оптимальности... 

Frantishik, 
Цитата

IDVsbruck, спасибо огромное за чёткий код.

Это Вы о чем написали?  smile 

Цитата

не один из примеров на всём форуме по предзагрузке картинок не работает!


Работают... прекрасно работают, просто ещё не было функции для балбесов - теперь есть.




--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
Frantishik
Дата 2.6.2008, 15:57 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Новичок



Профиль
Группа: Участник
Сообщений: 10
Регистрация: 24.12.2007

Репутация: нет
Всего: нет



Если бы я считал себя гуру и был мастером высшего класса, разве я обращался бы за помощью.....
И мне интересна не сама идея(я думаю догодаться не сложно,если есть хоть немного логики и знаний в программировании),  не код от <html> до </html>, а сама технология работы.
Я поблагадарил IDVsbruck, потому что мне его код разьяснил, что помимо создания объекта, его нужно добавить к body.
Ghirik, приведите пример с форума, который реально работает. Перед тем как создавать топик, я облазил весь форум, рассмотрел и проработал все примеры(их около 8).... 
Я занимался системным программированием и мне кажется странным тот факт, что управление покидает цикл практически мгновенно...
Тогда что же всё таки загружает картинки и делает эту задержку во время которой и грузятся картинки?.... 

по поводу балбесов,Ghirik имейте уважение .... 
если вы считаете мои вопроссы глупыми и отвечаете нехотя, просто пропустите топик.....

Это сообщение отредактировал(а) Frantishik - 2.6.2008, 16:09
PM MAIL   Вверх
IDVsbruck
Дата 2.6.2008, 16:22 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 778
Регистрация: 12.11.2006

Репутация: 8
Всего: 22



Цитата(Frantishik @  2.6.2008,  15:57 Найти цитируемый пост)
Я занимался системным программированием и мне кажется странным тот факт, что управление покидает цикл практически мгновенно...
Тогда что же всё таки загружает картинки и делает эту задержку во время которой и грузятся картинки?

Событие onload! ... или проверка на уже загруженную картинку.
В цикле мы всего-навсего назначаем событие onload для картинки - и все, и это происходит в считанные миллисекунды. А когда картинка загружается, возникает событие onload, интерпретатор идет в обработчик, назначенный нами в цикле и выполняет нужную функцию и нужный скрипт. Теоретически, если повесить многомегабайтовые картинки, то можно просидеть не один десяток минут (ограниченный сессией), пока не сработают обработчики для ВСЕХ картинок.

PM MAIL   Вверх
Ghirik
Дата 2.6.2008, 17:31 (ссылка) | (нет голосов) Загрузка ... Загрузка ... Быстрая цитата Цитата


Опытный
**


Профиль
Группа: Участник
Сообщений: 919
Регистрация: 26.3.2007

Репутация: 13
Всего: 20



Цитата

а сама технология работы


Лучше нет способа для понимания технологии, это иметь правильно работающий скрипт оформленный от <html> до </html>. Берите его и изменяйте, вставляйте алерты, смотрите в какие моменты, что происходит. Начинать изучение нужно именно с работающих скриптов. От <html> до </html> имеет очень большое значение для начинающих, т.к., от DOCTYPE зависит работоспособность тех или иных методов JavaScript-а. Можно потратить массу времени, пытаясь разобраться почему не работает скрипт, а потом выяснить, что просто неправильно указан тип документа, и этот метод не работает с таким типом.

Цитата

Ghirik, приведите пример с форума, который реально работает.


Я конечно не буду искать примеры. Зачем? То, что те примеры не заработали у Вас, не означает, что они нерабочие. Есть масса нюансов, которые следует учитывать... Например, Опера не станет загружать изображение на страницу, если оно имеет свойство display:none, для Оперы изображение нужно прогнать через массив. IE и FF - напротив, прекрасно грузят изображение в скрытом виде, но IE игнорирует загрузку в массив и начинает сразу его отдавать на страницу... 

С контролем события onload изображения, полностью готовой к употреблению функции не было, хотя, обсуждалось неоднократно... А может и была... smile 

Цитата

по поводу балбесов,Ghirik имейте уважение .... 


Я же не имел Вас ввиду, просто, теперь каждый, кто сделает копи-пасте, задумается...  smile 




--------------------
Отдадим всё клиенту, пускай его машина мучается...

PM MAIL   Вверх
Страницы: (3) Все 1 2 [3] 
Ответ в темуСоздание новой темы Создание опроса
Форум для вопросов, которые имеются в справочниках, но их поиск вызвал затруднения, или для разработчика требуется совет или просьба отыскать ошибку. Напоминаем: 1) чётко формулируйте вопрос, 2) приведите пример того, что уже сделано, 3) укажите явно, нужен работающий пример или подсказка о том, где найти информацию.
 
0 Пользователей читают эту тему (0 Гостей и 0 Скрытых Пользователей)
0 Пользователей:
« Предыдущая тема | JavaScript: Общие вопросы | Следующая тема »


 




[ Время генерации скрипта: 0.0557 ]   [ Использовано запросов: 22 ]   [ GZIP включён ]


Реклама на сайте     Информационное спонсорство

 
По вопросам размещения рекламы пишите на vladimir(sobaka)vingrad.ru
Отказ от ответственности     Powered by Invision Power Board(R) 1.3 © 2003  IPS, Inc.