Question

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

Answer 1

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

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

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

Answer 2

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

如果您想要一个可以包含网址的元数据（在任何代码上），请使用您要选择的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示例：

<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

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

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

4 个答案: