[Роман Андреевич]

Коллеги, прошу помощи начинающему)))
Есть разметка:

<ul>
		<li><img src="1.jpg" alt="1" data-picture="true"></li>
		<li><img src="2.jpg" alt="2" data-picture="true"></li>
		<li><img src="3.jpg" alt="3" data-picture="true"></li>
		<li><img src="4.jpg" alt="4" data-picture="true"></li>
		<li><img src="5.jpg" alt="5" data-picture="true"></li>
		<li><img src="6.jpg" alt="6" data-picture="true"></li>
		<li><img src="7.jpg" alt="7" data-picture="true"></li>
		<li><img src="8.jpg" alt="8" data-picture="true"></li>
		<li><img src="9.jpg" alt="9" data-picture="true"></li>
	</ul>

далее мне нужно взять реальные размеры все картинок:

var list = document.querySelector('ul'),
				img = list.querySelectorAll('img[data-picture]');

	    	for (var i = 0; i < img.length; i++) {
	    		
	    		console.log(img[i]);
	    		console.log('Ширина = ' + img[i].naturalWidth);
	    		console.log('Высота = ' + img[i].naturalHeight);

	    	}

выводит в консоль ширина и высота = 0. Подскажите как сделать, может я что не так делаю????
Заранее спасибо