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

src 将立即渲染该值，它\xe2\x80\x99是使用单一源和 iframe 的图像、视频的默认值。

\n

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

\n

Answer 4

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