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

Question

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

原文由 Adam Pierzchała 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

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

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

原文由 Jukka K. Korpela 发布，翻译遵循 CC BY-SA 3.0 许可协议

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>

原文由 jfriend00 发布，翻译遵循 CC BY-SA 3.0 许可协议