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

[VINRARUS]

Есть типо медленный конект, есть тяжелые изображения. При загрузке страницы (галерея) отображаются 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

[dmitriymar]

document.write
document.body.innerHTML+=KARTINKO;

[ruslan_mart]

<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();

[VINRARUS]

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 таки шустрее работает с тяжелым кодом\данными чем хром и "старая" опера.

[ruslan_mart]

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();

[VINRARUS]

упс, я кое что упустил, вот:
: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) для браузера легче, появляется время что бы отмаштабировать :)

[Андрей38]

Здравствуйте,гуру! За инкриментом-закрепленна ссылка в массиве... Но я уже сделал версию как раз с сеттаймом,но потом я решил сделать по событию готовности ифрейма.У меня,ноут,и я увидел как долго грузиться на телефоне: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,
не засоряйте форум.

[Андрей38]

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

[рони]

Андрей38,
http://javascript.ru/forum/search.php?do=finduser&u=10645