Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 24.07.2013, 21:42
Аватар для Mike_Kharkov
Кандидат Javascript-наук
Отправить личное сообщение для Mike_Kharkov Посмотреть профиль Найти все сообщения от Mike_Kharkov
 
Регистрация: 04.01.2012
Сообщений: 143

Быстрая и синхронная подгрузка картинок.
Добрый вечер.
Недавно у меня появился проект на котором требуется, что бы вся графика на странице появлялась(при загрузке страницы) одновременно и без особых задержек.
Вопрос:
Какие механизмы на сегодняшний день существуют в этом плане?
(можно ли это организовать спрайтами или при помощи JS что-нибудь придумать?)
Ответить с цитированием
  #2 (permalink)  
Старый 24.07.2013, 21:56
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от Mike_Kharkov
одновременно и без особых задержек.
проверяй был ли onload, как у всех был, тогда и показывать
"без особых задержек" - расплывчатая формулировка
я тоже хочу, чтобы у меня было пару гигов фото, а отобразилось всё мгновенно при открытии страницы
Ответить с цитированием
  #3 (permalink)  
Старый 24.07.2013, 22:18
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.img {display: none}
</style>
<img src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<script>
jQuery(function ($) {
	var d = 0;
	var images = $(".img");
	var len = images.size();
	images.each(function() {
		$(this).on("load", function () {
			d++;
		});
	});
	var int = setInterval(function () {
		if (d == len) {
			images.show();
			clearInterval(int);
		}
	}, 500);
});
</script>

если вообще все, то просто по window.onload
если хоть с одной будут проблемы, не покажется ничего
Ответить с цитированием
  #4 (permalink)  
Старый 24.07.2013, 22:38
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

each можно убрать
<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<style>
.img {display: none}
</style>
<img src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235">
<script>
jQuery(function ($) {
	var d = 0;
	var images = $(".img");
	var len = images.size();
	images.on("load", function () {
		d++;
	});
	var int = setInterval(function () {
		if (d == len) {
			images.show();
			clearInterval(int);
		}
	}, 500);
});
</script>
Ответить с цитированием
  #5 (permalink)  
Старый 24.07.2013, 23:18
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

bes,
а в ие проверяли?
Ответить с цитированием
  #6 (permalink)  
Старый 24.07.2013, 23:28
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от рони
bes,
а в ие проверяли?
сейчас проверил - работает, что не так?
Ответить с цитированием
  #7 (permalink)  
Старый 24.07.2013, 23:32
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

на форуме через ie - да, чёт не всё ладно
Ответить с цитированием
  #8 (permalink)  
Старый 25.07.2013, 00:33
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,075

bes,
пробовал ие и без форума результат тотже нет картинок.
Ответить с цитированием
  #9 (permalink)  
Старый 25.07.2013, 03:00
Аватар для Mike_Kharkov
Кандидат Javascript-наук
Отправить личное сообщение для Mike_Kharkov Посмотреть профиль Найти все сообщения от Mike_Kharkov
 
Регистрация: 04.01.2012
Сообщений: 143

Сообщение от bes Посмотреть сообщение
на форуме через ie - да, чёт не всё ладно
Сообщение от рони Посмотреть сообщение
bes,
пробовал ие и без форума результат тотже нет картинок.

Проверил у себя:
C форума в IE тоже проблема - но с локалки в IE отображается в норме.(если картинки маленькие.)
Если картинки побольше и все это дело на хостинг залить - то тогда всё это дело работает через раз. (По крайней мере лично у меня..)
http://webmaster.ayrveda.ru/111/js_template.htmlhttp://webmaster.ayrveda.ru/111/js_template.html
Пробовал увеличивать временной интервал(до 3500) - но это не помогает.
В норме работает(всё это дело) только, если картинки уже в кеше браузера есть..

Последний раз редактировалось Mike_Kharkov, 25.07.2013 в 03:31.
Ответить с цитированием
  #10 (permalink)  
Старый 25.07.2013, 03:49
без статуса
Отправить личное сообщение для Deff Посмотреть профиль Найти все сообщения от Deff
 
Регистрация: 25.05.2012
Сообщений: 8,219

<script src="http://code.jquery.com/jquery-1.8.3.min.js"></script>
<script>var d = 0;</script>
<div id=out></div>
<div style="position:absolute;z-index:-100;visibility:hidden">
<img  class="img" src="http://javascript.ru/forum/image.php?u=18034&dateline=1325652067"  onload="d++">
<img class="img" src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
<img class="img"src="http://javascript.ru/forum/image.php?u=19820&dateline=1334914235" onload="d++">
</div>
<script>
var len = $(".img").length;
var int = setInterval(function () {
  if (d >= len) {
    $(".img").appendTo("#out");
     clearInterval(int);
  }
}, 100);

</script>

Последний раз редактировалось Deff, 25.07.2013 в 04:12.
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Подгрузка картинок при скроллинге Александр141 Серверные языки и технологии 1 15.05.2013 18:36
Запись свойств картинок в строку Torch`Ok Events/DOM/Window 7 19.02.2013 16:49
подгрузка картинок land15 Элементы интерфейса 3 08.09.2012 23:01
Загрузчик картинок Livanderiaamarum Общие вопросы Javascript 1 15.01.2012 17:21
Как сделать прокрутку картинок Lugan Элементы интерфейса 1 26.06.2009 12:52