размер картинок

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

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

<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. Подскажите как сделать, может я что не так делаю????
Заранее спасибо

[рони]

Роман Андреевич,
обернуть скрипт в load, картинкам нужно время на загрузку

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

document.addEventListener('DOMContentLoaded', function() {

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

	    	}
			 

        });

Обернут. Не помогает. При клике на картинку все размеры выводятся, а при загрузке странице нет

[рони]

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

window.addEventListener('load', function() {

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

рони, спасибо, заработало. Не подгрузились картинки)))))