Javascript-форум - Подгрузка изображений по очереди

Javascript-форум (https://javascript.ru/forum/)

- Общие вопросы Javascript (https://javascript.ru/forum/misc/)

- - Подгрузка изображений по очереди (https://javascript.ru/forum/misc/40297-podgruzka-izobrazhenijj-po-ocheredi.html)

Подгрузка изображений по очереди

Есть типо медленный конект, есть тяжелые изображения. При загрузке страницы (галерея) отображаются 12 изображений, но при одновременной загрузке 12 изображений сразу очень неудобно ждать, особенно когда нужны только первые. :)
По этому нужно как то сначала до конца загрузить картинку №1, потом приступить к загрузке картинки №2, и т.д., то есть по очереди.

Пользуясь поиском нашел такое решение: http://web.izjum.com/js-image-preload
Только вот у меня после загрузки 1й картинки страница очищается и видно только 2ю картинку на белом фоне (код страницы содержит только тег 2й картинки). :(
Поправьте, может я не верно реализовал?

Данный код втавлен в место отображения каждой картинки.

<script>var KARTINKO = "<img src='/root$DIDKA$FIL' alt='' width='600' height='800' >";
  var preloadedImg = new Image(); 
  preloadedImg.src = "$prevKARTINKO"; 
  var myImageHandler = function() { 
  document.write(KARTINKO);
  } 
  if(preloadedImg.complete) { 
    myImageHandler(); 
  } else { 
    preloadedImg.onload = myImageHandler; 
} 
</script>

Текущая картинка: /root$DIDKA$FIL
Предыдущая картинка: $prevKARTINKO

Цитата:

Сообщение от VINRARUS

document.write

document.body.innerHTML+=KARTINKO;

<div id="imagesAll"></div>

var images = ['img1.png', 'myImg.jpg', 'images.gif']; //Ссылки к изображениям
var turn = 0;

function imgLoad() {
   if(!images[turn]) return;
   var a = new Image();
   a.alt = '';
   a.src = images[turn];
   turn++;
   a.onload = function() {
      document.getElementById('imagesAll').appendChild(a);
   }
}

imgLoad();

dmitriymar, спасибо за подсказку.
Ruslan_xDD, как то не заработал этот код, но я взял кое что полезное из него.

4 дня усилий принесли результаты. :D
Вот то о чем я мечтал:

<script>
var NUM = "1";
var NOM = "0";
var IMG = ['http://vinrarus.ucoz.net/D.gif', 'http://vinrarus.ucoz.net/D1.png', 'http://vinrarus.ucoz.net/D2.png', 'http://vinrarus.ucoz.net/D3.png', 'http://vinrarus.ucoz.net/D4.png', 'http://vinrarus.ucoz.net/D5.png']; //Ссылки к изображениям

function interval() {
var NOM = NUM;
var OMG = IMG[NOM];
if (OMG==undefined)
{
clearInterval(intervalID);
}
	 var preloadedImg = new Image();
	 preloadedImg.src = OMG;
	 if (preloadedImg.complete) {
	 var DIVI = 'IMG-'+NUM;
	 document.getElementById(DIVI).innerHTML = "<img src='"+IMG[NUM]+"' alt='' width='50' height='50' >";
	var NOM = NUM;
	NUM++;
	 }
}
//bu VINRARUS 2013
var intervalID=setInterval(interval,100);	//интервал
</script>


Представим что 1 картинка весит 2 мб...<br>
<img border="0" align="absmiddle" src="http://vinrarus.ucoz.net/D.gif" alt='' width='100' height='100' >
<span id='IMG-1'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-2'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-3'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-4'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-5'><img src='' alt='Loading...' width='50' height='50' ></span >

Единственный минус - не работает на IE (как всегда). :haha:
Может кто в курсе как на IE завести (по ссылке в 1м сообщении чего то не вышло)?

ПС: Firefox таки шустрее работает с тяжелым кодом\данными чем хром и "старая" опера.

VINRARUS, упс, я кое что упустил, вот:

var images = ['img1.png', 'myImg.jpg', 'images.gif']; //Ссылки к изображениям
var turn = 0;

function imgLoad() {
   if(!images[turn]) return;
   var a = new Image();
   a.alt = '';
   a.src = images[turn];
   turn++;
   a.onload = function() {
      document.getElementById('imagesAll').appendChild(a);
      imgLoad();
   }
}

imgLoad();

Цитата:

Сообщение от Ruslan_xDD

упс, я кое что упустил, вот:

:D Спасибо, теперь код мечты выглядит так:

<script>
var NUM = "1";
var IMG = ['http://vinrarus.ucoz.net/D.gif', 'http://vinrarus.ucoz.net/D1.png', 'http://vinrarus.ucoz.net/D2.png', 'http://vinrarus.ucoz.net/D3.png', 'http://vinrarus.ucoz.net/D4.png', 'http://vinrarus.ucoz.net/D5.png']; //Ссылки к изображениям
function LOAD() {
var OMG = IMG[NUM];
	 var preloadedImg = new Image();
	 preloadedImg.alt = '';
     preloadedImg.src = OMG;
   preloadedImg.onload = function() {
	 var DIVI = 'IMG-'+NUM;
	 document.getElementById(DIVI).innerHTML = "<img src='"+IMG[NUM]+"' alt='' width='50' height='50'>";
	 NUM++;
	 setTimeout(LOAD,100);
	 }
}
setTimeout(LOAD,100);

</script>
<span id='IMG-1'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-2'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-3'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-4'><img src='' alt='Loading...' width='50' height='50' ></span >
<span id='IMG-5'><img src='' alt='Loading...' width='50' height='50' ></span >

А задержка нужна по 2м причинам:
1) просто красиво когда картинки постепенно появляются
2) для браузера легче, появляется время что бы отмаштабировать :)

Здравствуйте,гуру! За инкриментом-закрепленна ссылка в массиве... Но я уже сделал версию как раз с сеттаймом,но потом я решил сделать по событию готовности ифрейма.У меня,ноут,и я увидел как долго грузиться на телефоне:cекудды тикают,а контент не виден...Так что нужно - по факту..
Переделал код под себя,исходя из своих представлений о цикле, взяв за основу сделанное тут товарищами по отношению к картинкам. Так вот, осталось самую малость-переделать под ифреймы..Вот этот проблемный курсив...а мне надо -ифрейм!Я уже всякое new подставлял-не работает з.

javascript:
// ПОМОГИТЕ ПОЖАЙЛУСТА СДЕЛАТЬ ТАКУЮ ПРЕДЗАГРУЗКУ ДЛЯ ИФРЕЙМА, УВАЖАЕМЫЕ ГУРУ!
var preloadedImg = document.createElement('iframe');
gotov= preloadedImg.src = 'google.com';
var x=0;

while (x<3){
x++;
var gg= function() {
document.body.innerHTML+='<iframe src="'+gotov+'"</iframe>';
alert(gotov)} ;
if(preloadedImg.complete) {
gg()
};
};

Андрей38,
не засоряйте форум.

рони,
Я не знаю как искать свои оставленные сообщения