将属性从data-src更改为src with without jQuery

Question

我正在用纯JavaScript构建一个灯箱.我目前通过AJAX加载我的图像,但我知道只需将img data-src属性替换为src即可.

然而,我不知道如何在纯JavaScript中完成,我的意思是,不使用任何库.

谁能告诉我这是怎么做到的？

总结:我如何改变前:

<img data-src="URL"/>

至:

<img src="URL"/>

没有jQuery.

Answer 1

你可以这样做,如下所示:

var imgEl = document.getElementsByTagName('img');
for (var i=0; i<imgEl.length; i++) {
    if(imgEl[i].getAttribute('data-src')) {
       imgEl[i].setAttribute('src',imgEl[i].getAttribute('data-src'));
       imgEl[i].removeAttribute('data-src'); //use only if you need to remove data-src attribute after setting src
    }
}

上面的代码将获取所有img标记,检查它们是否具有data-src属性,如果存在,则将其替换为src.

演示小提琴

Answer 2

获取image元素的句柄,然后src使用from中的值设置它的属性getAttribute().

普通Javascript没有任何辅助函数来处理data-*属性,它只是将它们视为任何其他属性.

var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");