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

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

<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 и сделать ее максимально простой.

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

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

Итак, как я могу сказать, когда dom готов, чтобы все фигуры > 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>

javascript image asynchronous jquery attr
person jQuerybeast    schedule 01.02.2012    source источник

Ответы (2)


arrow_upward
12
arrow_downward

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

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

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

person Pointy    schedule 01.02.2012
comment
@Phrogz, Pointy: использование .data() удобно и здорово, если вам нужно будет работать с данными позже, но если нет, то быстрее использовать .attr() и не создавать ненужную постоянную ссылку на данные. - person ; 01.02.2012
comment
...но this.src определенно лучше, так что +1. - person ; 01.02.2012
comment
@amnotiam re: использование .data() - я не думал об этом; это очень хороший момент. Это одна из тех ситуаций, когда я не совсем уверен, что понимаю, почему человек вообще может столкнуться с проблемой... - person Pointy; 01.02.2012
comment
@Pointy: Да, атрибут data- кажется наиболее полезным для отправки простой строки с сервера с элементом. jQuery.cache отлично подходит для более сложных данных, но для простых строк я бы предпочел просто посмотреть на атрибут. В конечном счете, мы будем делать this.dataset.src, как только будет достигнута совместимость. - person ; 01.02.2012

arrow_upward
6
arrow_downward 

$('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');
person Community    schedule 01.02.2012
comment
Я сейчас так сильно хлопаю себя по лбу за то, что не усвоил тот факт, что это работает. - person Pointy; 01.02.2012
comment
@Pointy: Вы имеете в виду аргумент функции? :) - person ; 01.02.2012
comment
@Phrogz: Готов поспорить, что использование this.src @Pointy будет быстрее. Я бы, вероятно, сделал это, если бы это был я, поскольку src действительно не нуждается в каких-либо исправлениях jQuery. Но между .attr() и .data() на прошлой неделе я провел несколько тестов, и .attr() оказался лучшим. - person ; 01.02.2012
comment
...самый быстрый, безусловно, будет в пользу старой школы this.src = this.getAttribute('data-src') - person ; 01.02.2012
comment
@Phrogz: Нашел jsPerf. Я склонил чашу весов в пользу .data(), предварительно заполнив jQuery.cache перед запуском тестов, но .attr() все же вышел на первое место. - person ; 01.02.2012
comment
Я нахожу оба ответа очень похожими, и мне тоже понравились оба. Хотя getAttribute кажется быстрее, чем данные, но в моем случае для 2-3 изображений скорость не является приоритетом. Из-за того, что @Pointy ответил первым, я выбрал его ответ. Спасибо - person jQuerybeast; 01.02.2012
comment
@ Джонатан: Конечно. Ответ Пойнти хороший, и вы правы, всего с несколькими изображениями это не будет иметь значения. - person ; 01.02.2012