Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 06.07.2013, 10:21
Интересующийся
Отправить личное сообщение для ml227 Посмотреть профиль Найти все сообщения от ml227
 
Регистрация: 27.06.2013
Сообщений: 15

Поочередная загрузка картинок
Хочу организовать фотогалерею, где на экран выводится 500 изображений
100 на 75 со ссылкой на фото в полном размере.

На так как фото оч. много , они загружаються хаотически.

Как на js организовать последовательную загрузку?
Мож. чтобы скрипт проверял загружено ли предыдущее изображение, а потом загружал следующее.
Ответить с цитированием
  #2 (permalink)  
Старый 06.07.2013, 11:36
Аватар для ruslan_mart
Профессор
Отправить личное сообщение для ruslan_mart Посмотреть профиль Найти все сообщения от ruslan_mart
 
Регистрация: 30.04.2012
Сообщений: 3,018

<div id="photos"></div>

var Photos = ['photo1.jpg', 'photo2.jpg', 'test.jpeg']; //Ссылки к фотографиям

function addImg(n)
{
   var img = document.createElement('IMG');
   img.alt = '';
   img.src = Photos[n];
   img.onload = function()
   {
       addImg(n + 1);
   }
   document.getElementById('photos').appendChild(img);
}

addImg(0);


Ничего в голову не приходит кроме такого
Ответить с цитированием
  #3 (permalink)  
Старый 06.07.2013, 19:41
Интересующийся
Отправить личное сообщение для ml227 Посмотреть профиль Найти все сообщения от ml227
 
Регистрация: 27.06.2013
Сообщений: 15

Спасибо
Ответить с цитированием
  #4 (permalink)  
Старый 06.07.2013, 20:02
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105


на всякий случай
Сообщение от Ruslan_xDD
document.createElement('IMG')
можно заменить на new Image();
и лучше
img.onload вначале потом img.src
Ответить с цитированием
  #5 (permalink)  
Старый 06.07.2013, 20:15
Интересующийся
Отправить личное сообщение для alokazay Посмотреть профиль Найти все сообщения от alokazay
 
Регистрация: 07.08.2012
Сообщений: 11

И в конце получите ошибку. Надо делать проверку на количество элементов в массиве. if (n<Photos.length) addImg(n + 1);

Последний раз редактировалось alokazay, 06.07.2013 в 20:24.
Ответить с цитированием
  #6 (permalink)  
Старый 06.07.2013, 21:58
Интересующийся
Отправить личное сообщение для ml227 Посмотреть профиль Найти все сообщения от ml227
 
Регистрация: 27.06.2013
Сообщений: 15

Странно но код работает только в опере и ie !
Ответить с цитированием
  #7 (permalink)  
Старый 06.07.2013, 22:58
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 33,105

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

Сообщение от рони
и лучше
img.onload вначале потом img.src
в чём разница?
Ответить с цитированием
  #9 (permalink)  
Старый 06.07.2013, 23:43
Профессор
Отправить личное сообщение для zebra Посмотреть профиль Найти все сообщения от zebra
 
Регистрация: 14.09.2011
Сообщений: 523

Сообщение от bes
в чём разница?
Картинка может загрузиться из кеша, и онлоад не сработает
Ответить с цитированием
  #10 (permalink)  
Старый 07.07.2013, 00:10
Аватар для bes
bes bes вне форума
Профессор
Отправить личное сообщение для bes Посмотреть профиль Найти все сообщения от bes
 
Регистрация: 22.03.2012
Сообщений: 3,744

Сообщение от zebra
Картинка может загрузиться из кеша, и онлоад не сработает
вот оно как
то, что загрузка начинается в момент присвоения значения src, понятно
остальное - нет, так как тогда бы код ниже не работал во все разы после первого (кеш хрома показал, что картинка там)
<button id="but">load</button>
<script>
but.onclick = function () {
	var img = new Image();
	img.src = "http://javascript.ru/forum/image.php?u=19820&dateline=1334914235";
	img.onload = function () {
		alert("loaded");
	}
	document.body.appendChild(img);
}
</script>
Ответить с цитированием
Ответ



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

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


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Асинхронная загрузка картинок Nikoole AJAX и COMET 5 07.07.2011 10:44
Загрузка картинок при условии AlienZ Общие вопросы Javascript 11 23.06.2011 20:14
Загрузка валидных форматов картинок alex_89 Общие вопросы Javascript 7 19.06.2011 23:04
Загрузка картинок из кукисов KraT Ваши сайты и скрипты 2 25.02.2010 17:42
Асинхронная загрузка картинок. Leonid AJAX и COMET 9 13.05.2008 09:33