6

我正在用纯 JavaScript 构建一个灯箱。我目前通过 AJAX 加载图像，但我知道将 img data-src 属性替换为 onclick 到 src 更容易。

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

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

总结一下：我如何改变前：

<img data-src="URL"/>

至：

<img src="URL"/>

没有 jQuery。

4

3 回答 3

13

您可以如下所示执行此操作：

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为.

演示小提琴

于 2013-10-12T11:33:08.010 回答
7

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

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

var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");
于 2013-10-12T11:30:08.447 回答
3

You can use forEach with 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' />

于 2019-07-04T00:42:11.543 回答