Src 和 data-src 属性之间的所有区别是什么？

使用 img标签的 data-src或 src属性有什么区别和后果(好的和坏的) ？我可以同时使用这两种方法获得相同的结果吗？如果是的话，应该在什么时候使用它们？

174752 次浏览
小开

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

小开

Well the data src attribute is just used for binding data for example ASP.NET ...

W3School src attribute

属性

小开

如果希望图像加载并显示特定的图像，则使用 .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>

Example of data-src on an image tag used as a place to store the URL of an alternate image:

<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>
小开
最佳答案

属性 src和 data-src没有任何共同之处，除了它们都被 HTML5CR 所允许，并且它们都包含字母 src。其他的一切都不一样了。

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

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

小开

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

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

小开

As the accepted answer says. If you're looking for the usage of data-src 懒虫 is a popular one.


提交答案