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

使用tag data-src或srcattribute有什么区别和后果（好的和坏的）img？可以同时使用两者获得相同的结果吗？如果是这样，何时应分别使用它们？

属性src和data-src没有共同点，除了HTML5 CR允许它们并且都包含字母之外src。其他一切都不同。

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

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

如果要加载图像并显示特定图像，请使用.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>

第一个<img />无效- src是必填属性。data-src是JavaScript无法利用的属性，但没有表述意义。

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

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

W3School src属性

MSDN datasrc属性