首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

在dom ready上,从<img>获取所有data-src并将它们设置在src属性中

在DOM ready上,从<img>获取所有data-src并将它们设置在src属性中,可以通过以下步骤实现:

  1. 在DOM ready事件中,使用JavaScript选择所有的<img>元素。可以使用document.querySelectorAll()方法并传入选择器"img"来获取所有的<img>元素。
  2. 遍历所选的<img>元素列表,对于每个<img>元素,使用getAttribute()方法获取其data-src属性的值。可以使用getAttribute("data-src")来获取data-src属性的值。
  3. 将获取到的data-src属性值设置为对应<img>元素的src属性的值。可以使用setAttribute()方法将data-src的值设置为src属性的值。例如,使用setAttribute("src", dataSrcValue)来设置src属性的值。

以下是一个示例代码:

代码语言:javascript
复制
document.addEventListener("DOMContentLoaded", function() {
  var imgElements = document.querySelectorAll("img");
  for (var i = 0; i < imgElements.length; i++) {
    var imgElement = imgElements[i];
    var dataSrcValue = imgElement.getAttribute("data-src");
    imgElement.setAttribute("src", dataSrcValue);
  }
});

这样,当DOM ready事件触发时,代码会选择所有的<img>元素,并将它们的data-src属性值设置为对应的src属性值,从而实现从<img>获取所有data-src并将它们设置在src属性中的功能。

推荐的腾讯云相关产品:腾讯云对象存储(COS)

  • 概念:腾讯云对象存储(COS)是一种海量、安全、低成本、高可靠的云存储服务,适用于存储大量非结构化数据,如图片、音视频、文档等。
  • 分类:云存储服务
  • 优势:高可靠性、低成本、海量存储、安全性高、支持多种数据访问方式
  • 应用场景:网站图片、音视频存储、大数据分析、备份与归档等
  • 产品介绍链接地址:腾讯云对象存储(COS)

请注意,本回答仅提供了一个示例代码和一个腾讯云产品作为参考,实际情况下可能有更多的解决方案和产品选择。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 使用交叉点观察器延迟加载图像以提高性能

    在自己平时浏览一些大量图片类的网站时,你会发现无论是你pc端下拉滚动条,还是移动端手动滑屏时,最终呈现的图片有时候会有所延迟,这是一种预先加载图片资源的方式,也就是俗称懒加载,实现该效果,通常有两种方式,分别是线性式(下拉窗帘式的)和渐进式(拨开晨雾见日明)图片加载,至于前者这里暂且不谈,本文主要是介绍后者,在本文中主要给img标签添加一data-src属性(实际图片URL),以及src属性(存储相同图像的非常小的分辨率路径图片),在加载图片时,给用户过度从模糊淡入到图片清晰,当然更重要的是其中的js处理,如果文有误导的地方,欢迎路过的老师多提意见和指正

    01
    领券