Як змінити атрибут img data-src на src в javascript, використовуючи jQuery?

11487

Для програмної оптимізації сайту шляхом підвищення швидкості, використовується метод відкладеної lazy завантаження зображень

Робиться це шляхом заміни атрибуту data-src на звичайний src у тезі img через JS

Робочий приклад на jQuery:

$('body').find("img").each(function() {    
    $(this).attr("src",$(this).attr("data-src"));
    $(this).removeAttr("data-src");
    //console.log($(this)[0].outerHTML);
});

Зміна атрибута data-src на src у HTML тезі img використовуючи лише javascript

function initlazyimg() {
    var scripts = document.getElementsByTagName('script');
    var section = scripts[scripts.length-1].parentNode;
    var images = section.getElementsByTagName('img');
    for (var i = 0; i < images.length; i++) {
        var datasrc = images[i].getAttribute('data-src');
        var src = document.createAttribute('src');
        src.value = datasrc;
        images[i].setAttributeNode(src);
        images[i].removeAttribute('datasrc');
    }
}

HTML код прикладу, де blank.gif - фонове фото невеликого розміру

<section>
<ul>
<li><img data-src="/imgages/myimage1.png" src="blank.gif" /></li>
<li><img data-src="/imgages/myimage2.png" src="blank.gif" /></li>
</ul>
</section>