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

【问题标题】：What are all the differences between src and data-src attributes?src 和 data-src 属性之间有什么区别？
【发布时间】：2013-02-25 12:51:13
【问题描述】：

使用img 标记的data-src 或src 属性有什么区别和后果（好的和坏的）？我可以同时使用两者来获得相同的结果吗？如果是这样，应该在什么时候使用它们？

【问题讨论】：

标签： html image

【解决方案1】：

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

src 属性是在 HTML 规范中定义的，它具有功能意义。

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

【讨论】：

Angular.js 还使用 data-src 基于模型对 url 进行后期绑定
感谢您的明确回答 :) 即将使用 jQuery.lazy，但不确定 scr 发生了什么

【解决方案2】：

如果您希望图像加载并显示特定图像，请使用 .src 加载该图像 URL。

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

关于 data-xxxx 属性的 MDN 文档：https://developer.mozilla.org/en-US/docs/DOM/element.dataset

图像标签上的src 示例，图像会为您加载并显示 JPEG：

<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>

【讨论】：

【解决方案3】：

第一个 <img /> 无效 - src 是必需属性。 data-src 是一个可以被 JavaScript 等利用的属性，但没有表示意义。

【讨论】：

@AdamPierzchała 要点是一样的——这个问题没有“非此即彼”； src 必须包含在内。您可以使用 data- 属性添加额外的数据以供脚本语言（如 JavaScript）利用。

【解决方案4】：

src 将立即呈现该值，它是使用单一来源的图像、视频和 iframe 的默认值。

在延迟加载时使用data-src，以防止页面加载时加载默认图像。大多数延迟加载库会使用交集观察器，并在加载图像时将 data-src 值复制到 src。

【讨论】：

【解决方案5】：

data src 属性仅用于绑定数据，例如 ASP.NET ...

W3School src attribute

MSDN datasrc attribute

【讨论】：