Html src 和 data-src 属性之间的所有区别是什么？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/15320052/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
What are all the differences between src and data-src attributes?
提问by Adam Pierzcha?a
What are differences and consequences (both good and bad) of using either data-srcor srcattribute of imgtag? Can I achieve the same results using both? If so, when should be used each of them?
使用标签的任一个data-src或src属性有什么区别和后果（好的和坏的）img？我可以使用两者获得相同的结果吗？如果是这样，什么时候应该使用它们中的每一个？
回答by Jukka K. Korpela
The attributes srcand data-srchave nothing in common, except that they are both allowed by HTML5 CR and they both contain the letters src. Everything else is different.
属性src和data-src没有任何共同点，除了它们都被 HTML5 CR 允许并且都包含字母src. 其他一切都不同。
The srcattribute is defined in HTML specs, and it has a functional meaning.
该src属性是在 HTML 规范中定义的，它具有功能意义。
The data-srcattribute is just one of the infinite set of data-*attributes, which have no defined meaning but can be used to include invisible data in an element, for use in scripting (or styling).
该data-src属性只是无限组data-*属性中的一个，这些属性没有定义的含义，但可用于在元素中包含不可见的数据，以用于脚本（或样式）。
回答by jfriend00
If you want the image to load and display a particular image, then use .srcto load that image URL.
如果您希望图像加载并显示特定图像，则使用.src加载该图像 URL。
If you want a piece of meta data (on any tag) that can contain a URL, then use data-srcor any data-xxxthat you want to select.
如果您想要一段可以包含 URL 的元数据（在任何标签上），请使用data-src或data-xxx您想要选择的任何内容。
MDN documentation on data-xxxx attributes: https://developer.mozilla.org/en-US/docs/DOM/element.dataset
关于 data-xxxx 属性的 MDN 文档：https: //developer.mozilla.org/en-US/docs/DOM/element.dataset
Example of srcon an image tag where the image loads the JPEG for you and displays it:
src在图像标签上的示例，其中图像为您加载 JPEG 并显示它：
<img id="myImage" src="http://mydomain.com/foo.jpg">
<script>
var imageUrl = document.getElementById("myImage").src;
</script>
Example of 'data-src' on a non-image tag where the image is not loaded yet - it's just a piece of meta data on the div tag:
图像尚未加载的非图像标签上的“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>
Example of data-srcon an image tag used as a place to store the URL of an alternate image:
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>
回答by Tieson T.
The first <img />is invalid - srcis a required attribute. data-srcis an attribute than can be leveraged by, say, JavaScript, but has no presentational meaning.
第一个<img />无效 -src是必需的属性。data-src是一个可以被 JavaScript 等利用的属性，但没有表示意义。
回答by ElomSkillupsoft
data-src attribute is part of the data-* attributes collection introduced in HTML5. data-src allow us to store extra data that have no meaning to the browser but that can be use by Javascript Code or CSS rules.
data-src 属性是 HTML5 中引入的 data-* 属性集合的一部分。data-src 允许我们存储对浏览器没有意义但可以被 Javascript 代码或 CSS 规则使用的额外数据。
回答by Mikatsu
Well the data src attribute is just used for binding data for example ASP.NET ...
那么 data src 属性仅用于绑定数据，例如 ASP.NET ...
