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

Question

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

Answer 1

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

该src属性在 HTML 规范中定义，并且具有功能意义。

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

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

Answer 3

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

Answer 4

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

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

Answer 5

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

W3School src 属性

MSDN datasrc 属性