Ждать окончания подгрузки изображения
 

Здравствуйте.
У меня скрипт создает img и назначает ему в src картинку. потом создает новую картинку, потом еще одну, а самую первую удаляет. то есть, все время две картинки, при чем каждая последующая поверх предыдущей. Проблема в том, что если медленное соединение интернета, то очередная картинка (еще пустая) может появится до того, как загрузилось изображение в первую.
делал onLoad проверку, если загрузилось, то только тогда добавлять новую, но что-то не работает... подскажите как правильно, пожалуйста.
на данный момент такой код:

...
 pole = document.getElementById('pole');

 img = document.createElement('img');
 
 img.style.position = 'absolute';
 img.style.top = 100+'px';
 img.left = 200+'px';
 img.height = 300+'px';
 img.style.width = 400+'px';

 img.onLoad = function()
 {
  img.src = 'какая-то картинка';
  pole.appendChild(img);
  setTimeout('эта же функция', 30);
 }
...

img.onLoad = function()

Вместо onLoad должно быть onload

Никакой разницы ... все равно новая добавляется до того, как загрузится первая =(

Что еще можно сделать???

Зачем setTimeout и что такое "эта же функция"?
Странная какая-то логика в коде. Сделайте функцию и вызывайте ее после загрузки предыдущего изображения с новым адресом картинки.

<div id="pole"></div>
 <script>
 var pole = document.getElementById('pole');
 var imgSrcs = [false, 'http://picsfab.com/download/image/80616/5000x3500_art-kosmos-3d.jpg','http://picsfab.com/download/image/76314/5000x3200_art-kosmos-3d.jpg','http://picsfab.com/download/image/79812/7248x3819_art-kosmos-3d.jpg','http://www.fotokanal.com/images/72/earth-in-space.jpg','http://baadu.ru/ph/43/kosmos_planeta_bezdna_stanciya_shatl_mks_atmosfera_6048x4032.jpg','http://i.artfile.ru/4960x3544_662497_[www.ArtFile.ru].jpg','http://kidsmi.ru/wp-content/uploads/2013/04/DSC00870.jpg','http://catherineryanhoward.files.wordpress.com/2013/09/dscn0074.jpg'];
(function imgCreator() {
	if(!imgSrcs[1]) return;
	img = document.createElement('img');
	img.style.height = '60px';
	img.style.width = '80px';
	img.style.position = 'absolute';
	img.style.top = '10px';
	img.style.left = '20px';
	if (imgSrcs[0]) img.style.left = '100px'; // для четных изображений делаем отступ 20px + 80px
	imgSrcs[0] = !imgSrcs[0];
	img.src = imgSrcs[1];
	img.onload = function() {
		if (pole.children.length > 2) {
			var toRemove = pole.children[0];
			toRemove.parentNode.removeChild(toRemove);
		}
        imgSrcs.splice(1,1);
		imgCreator();
	}
	pole.appendChild(img);
})();
</script>

setTimeout чтобы менялись с небольшой задержкой, а не сразу, а "эта же функция" - это эта же функция) саму себя вызывает, с задержкой, в общем, чтобы менялись картинки...

30 миллисекунд и "сразу" - думаете, разница будет заметна?
я не вижу в вашем коде ни одной функции, которую можно было бы вызывать из самой себя.
Код, который я написал, не подходит?

Не подходит...
хотя может я неправильно делаю, я проверяю на медленном интернете, который есть только в телефоне... и там не работает. мой вариант - картинки подгружаются после добавления картинки, а не перед, а ваш вариант вообще не работает...
просто больше медленного интернета для проверки нет нигде...

все, что вам надо сделать, это нажать кнопку "посмотреть!" в посте №5 :) Я специально добавил адреса на 15- 25-мегапиксельные картинки, чтоб можно было оценить даже на НЕ медленном инете
ОК