Tất cả sự khác biệt giữa các thuộc tính src và data-src là gì?

Sự khác biệt và hậu quả (cả tốt và xấu) của việc sử dụng một trong hai data-srchoặc srcthuộc tính của imgthẻ là gì? Tôi có thể đạt được kết quả như nhau khi sử dụng cả hai không? Nếu vậy, khi nào nên sử dụng từng loại?

Các thuộc tính srcvà data-srckhông có điểm chung nào, ngoại trừ việc chúng đều được HTML5 CR cho phép và chúng đều chứa các chữ cái src. Mọi thứ khác đều khác.

Các srcthuộc tính được định nghĩa trong thông số kỹ thuật HTML, và nó có một ý nghĩa chức năng.

Các data-srcthuộc tính chỉ là một trong những bộ vô hạn của data-*các thuộc tính, mà đã không được xác định ý nghĩa nhưng có thể được sử dụng để bao gồm dữ liệu ẩn trong một phần tử, để sử dụng trong kịch bản (hoặc phong cách).

Nếu bạn muốn hình ảnh tải và hiển thị một hình ảnh cụ thể, thì hãy sử dụng .srcđể tải URL hình ảnh đó.

Nếu bạn muốn một phần dữ liệu meta (trên bất kỳ thẻ nào) có thể chứa URL, hãy sử dụng data-srchoặc bất kỳ dữ liệu nào data-xxxbạn muốn chọn.

Tài liệu MDN về thuộc tính data-xxxx: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

Ví dụ srcvề thẻ hình ảnh trong đó hình ảnh tải JPEG cho bạn và hiển thị nó:

<img id="myImage" src="http://mydomain.com/foo.jpg">

<script>
    var imageUrl = document.getElementById("myImage").src;
</script>

Ví dụ về 'data-src' trên thẻ không phải hình ảnh mà hình ảnh chưa được tải - nó chỉ là một phần dữ liệu meta trên thẻ 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>

Ví dụ data-srcvề thẻ hình ảnh được sử dụng làm nơi lưu trữ URL của hình ảnh thay thế:

<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>

Đầu tiên <img />là không hợp lệ - srclà một thuộc tính bắt buộc. data-srclà một thuộc tính có thể được tận dụng bởi JavaScript, nhưng không có ý nghĩa trình bày.

Thuộc tính data-src là một phần của bộ sưu tập thuộc tính data- * được giới thiệu trong HTML5. data-src cho phép chúng tôi lưu trữ dữ liệu bổ sung không có ý nghĩa đối với trình duyệt nhưng có thể được sử dụng bởi các quy tắc Javascript Code hoặc CSS.

Vâng, thuộc tính data src chỉ được sử dụng để liên kết dữ liệu, ví dụ ASP.NET ...

Thuộc tính src W3School

Thuộc tính datasrc MSDN