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。

Demo Fiddle

Answer 2

获取图像元素的句柄，然后使用src中的值设置getAttribute()属性。

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

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

Answer 3

您可以将forEach与querySelectorAll一起使用

var imageElements = document.querySelectorAll('img');
   
imageElements.forEach(c=> c.setAttribute('src',c.getAttribute('data-src')));

img{width:100px;}

<img data-src='https://cdn4.iconfinder.com/data/icons/nature-20/512/79-512.png' />

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

3 个答案: