src와 data-src 속성의 차이점은 무엇입니까?

data-src또는 태그의 src속성을 사용하는 것의 차이점과 결과 (좋은 것과 나쁜 것 모두)는 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 규칙에서 사용할 수있는 추가 데이터를 저장할 수 있습니다.

데이터 src 속성은 예를 들어 ASP.NET과 같은 데이터를 바인딩하는 데 사용됩니다.

W3School src 속성

MSDN datasrc 속성