Как массово применить адреса у картинок из дата атрибута?

Question

[Sergey]

Добрый день.

Есть вложенная структура:

<div class="container">
<a href="href_1">
     <img src="no_photo" data-href="link_1">
</a>
<a href="href_2">
     <img src="no_photo" data-href="link_2">
</a>
<a href="href_2">
     <img src="no_photo" data-href="link_2">
</a>
</div>

Подскажите, как можно при загрузке страницы пройтись по всем ссылкам, вынуть из data-href ссылку на фото и вставить в свою картинку в SRC картинки.

То есть: изначально у фоток - заглушка, а по загрузке - что бы фотки вставали на свои места, как-то так.

Comments

[Сергей Сергей]

$('img').each( ( i, el ) => { el.src = $(el).data( 'href' ) } );

Answer 1

[Надим]

Выведите на нужных страницах скрипт:

<script type="text/javascript">
	document.addEventListener('DOMContentLoaded', function() {
		var img = document.querySelectorAll('img[data-href]');
		for (var n = 0; n < img.length; n++) {
			var attr = img[n].getAttribute('data-href');
			img[n].setAttribute('src', attr);
		}
	});
</script>

Библиотека jQuery не требуется, будет работать и без него. При желании, событие DOMContentLoaded вы можете заменить просто на load, если вдруг вам сначала надо дождаться полной загрузки стилей, скриптов и тех картинок, что не имеют заглушки. Разница между ними в том, что при DOMContentLoaded авто замена атрибутов отработает сразу, как только документ будет загружен и готов к работе, а в случае load будет дополнительная небольшая задержка, пока другие внешние ресурсы не прогрузятся (стили, скрипты и обычные картинки).