Когда все готово, получите все data-src из <img>и установите их в атрибуте src

Question

На странице у меня есть это:

<figure><img src="" data-src="img1.png"></figure>
<figure><img src="" data-src="img2.png"></figure>
<figure><img src="" data-src="img3.png"></figure>
<figure><img src="" data-src="img4.png"></figure>

и продолжается.

Я пытаюсь выполнить асинхронную загрузку без использования плагина jquery и сделать его максимально простым.

Итак, я подумал, когда dom будет готов и страница полностью загружена, установите для data-src значение src.

Если я сделаю это: console.log($('figure img').attr('data-src')) Я получу только первое изображение. так что это дает мне результат: img1.png

Итак, как я могу сказать, когда все готово, все числа> img> data-src будут установлены как src для этого img.

Итак, из этого:

<figure><img src="" data-src="img1.png"></figure>
<figure><img src="" data-src="img2.png"></figure>
<figure><img src="" data-src="img3.png"></figure>
<figure><img src="" data-src="img4.png"></figure>

на это:

<figure><img src="img1.png"></figure>
<figure><img src="img2.png"></figure>
<figure><img src="img3.png"></figure>
<figure><img src="img4.png"></figure>

Answer 1

Начиная с версии 1.4.3 или около того, jQuery непосредственно понимает атрибуты "data-". Так что просто сделайте это:

$('figure img').each(function() {
  this.src = $(this).data('src');
});

Вы должны использовать .each(), чтобы отделить обработку каждого элемента в первоначально выбранном списке, чтобы выполняемая операция могла использовать этот элемент сама.

Answer 2

$('figure > img').prop('src',function() {
    return $(this).attr('data-src');
});

---

Или немного быстрее с getAttribute().

$('figure > img').prop('src',function() {
    return this.getAttribute('data-src');
});

---

Если вы действительно хотите удалить data-src, то цепочку .removeAttr('data-src') до конца.

$('figure > img').prop('src',function() {
    return this.getAttribute('data-src');
}).removeAttr('data-src');