我正在用纯JavaScript构建一个灯箱。我目前通过 AJAX 加载我的图像,但我知道在单击到 src 时替换 img data-src 属性更容易。
然而,我不知道如何在纯JavaScript中完成此操作,我的意思是,不使用任何库。
谁能告诉我这是怎么做到的?
总结一下:我如何更改例如:
<img data-src="URL"/>
自:
<img src="URL"/>
没有jQuery。
您可以按如下所示进行操作:
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
。
演示小提琴
获取图像元素的句柄,然后使用 getAttribute()
中的值设置其src
属性。
Plain Javascript 没有任何辅助函数来处理data-*
属性,它只是将它们视为任何其他属性。
var img = document.getElementById("myimg");
img.src = img.getAttribute("data-src");
您可以将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' />