src和data-src属性之间有什么区别？
使用img标记的data-src或src属性有什么区别和后果(包括好的和坏的)？我可以同时使用这两种方法来达到相同的效果吗？如果是这样的话，应该在什么时候使用它们？
回答 5
Stack Overflow用户
发布于 2013-03-10 16:25:23
属性src和data-src没有任何共同之处，除了它们都是HTML5 CR允许的，并且都包含字母src。其他一切都是不同的。
src属性是在HTML specs中定义的，它具有功能含义。
data-src属性只是无限的data-*属性集合中的一个，这些属性没有定义的含义，但可以用来在元素中包含不可见的数据，以便在脚本(或样式)中使用。
Stack Overflow用户
发布于 2013-03-10 15:56:03
如果希望图像加载并显示特定的图像，则使用.src加载该图像的URL。
如果您想要一段可以包含URL的元数据(在任何标记上)，那么使用data-src或您想要选择的任何data-xxx。
关于data-xxxx属性的MDN文档：https://developer.mozilla.org/en-US/docs/DOM/element.dataset
图像标签上的src示例，其中图像为您加载并显示它：
<img id="myImage" src="http://mydomain.com/foo.jpg">
<script>
var imageUrl = document.getElementById("myImage").src;
</script>非图像标记上的' data -src‘示例，其中图像尚未加载-它只是div标记上的一段元数据：
<div id="myDiv" data-src="http://mydomain.com/foo.jpg">
<script>
// in all browsers
var imageUrl = document.getElementById("myDiv").getAttribute("data-src");
// or in modern browsers
var imageUrl = document.getElementById("myDiv").dataset.src;
</script>用作存储备用图像的data-src的位置的图像标记上的URL示例：
<img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg">
<script>
var item = document.getElementById("myImage");
// switch the image to the URL specified in data-src
item.src = item.dataset.src;
</script>Stack Overflow用户
发布于 2013-03-10 15:46:15
第一个属性无效- src是必需属性。比方说，JavaScript可以利用data-src作为属性，但它没有表示意义。
https://stackoverflow.com/questions/15320052
复制相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号