src和data-src属性之间有什么区别？

使用data-src或src属性的img标记有什么区别和后果（好与坏）？我可以使用两者达到相同的结果吗？如果是这样，什么时候应该使用它们中的每一个？src和data-src属性之间有什么区别？

来源

2013-03-10 Adam Pierzchała

133

属性src和data-src没有任何共同之处，不同之处在于它们都是由HTML5 CR允许并且它们都包含字母src。其他一切都不一样。

src属性在HTML规范中定义，它有一个功能含义。

data-src属性只是data-*属性的无限集中的一个，它没有定义的含义，但可用于在元素中包含不可见数据，以用于脚本（或样式）。

来源

2013-03-10 08:25:23

简洁明了。公认。 – 2013-03-10 09:19:49

Angular.js也基于模型 – Jeff 2014-03-24 17:20:19

使用data-src作为URL的后期绑定。Jeff你在想ng-src吗？ https://docs.angularjs.org/api/ng/directive/ngSrc – Shanimal 2014-10-21 01:13:30

第一个<img />无效 - src是必填属性。 data-src是一个属性，不能被JavaScript所利用，但没有表现意义。

来源

2013-03-10 07:46:14

我不清楚，请看我最新的问题。 – 2013-03-10 07:49:08

@AdamPierzchała要点是一样的 - 对于这个问题没有“或者/或”。必须包含'src'。您可以使用'data-'属性为脚本语言（如JavaScript）添加额外的数据来利用。 – 2013-03-10 07:53:43

-4

孔的数据src属性只是用于例如将数据绑定ASP.NET ...

W3School src attribute

MSDN datasrc attribute

来源

2013-03-10 07:50:58 Mikatsu

如果要加载和显示特定图像的图像，然后使用.src加载该图片网址。

如果您想要一段可以包含URL的元数据（在任何标签上），请使用data-src或您想要选择的任何data-xxx。

数据-XXXX MDN文档属性：的srchttps://developer.mozilla.org/en-US/docs/DOM/element.dataset

实施例上，其中图像将JPEG为您并将其显示一个图像标记：的

<img id="myImage" src="http://mydomain.com/foo.jpg"> 

<script> 
    var imageUrl = document.getElementById("myImage").src; 
</script>

实施例 '数据-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>

来源

2013-03-10 07:56:03 jfriend00

data-src属性是HTML5中引入的data- *属性集合的一部分。 data-src允许我们存储额外的数据，这些数据对浏览器没有意义，但可以通过Javascript代码或CSS规则使用。

来源

2017-10-19 18:39:59 ElomSkillupsoft

src和data-src属性之间有什么区别？

回答

相关问题