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

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>

---

data-src 속성은 HTML5에 도입 된 data- * 속성 컬렉션의 일부입니다. data-src를 사용하면 브라우저에 의미가 없지만 Javascript 코드 또는 CSS 규칙에서 사용할 수있는 추가 데이터를 사용할 수 있습니다.

---

첫 번째 <img />는 유효하지 않습니다 src. 필수 속성입니다. data-src예를 들어 JavaScript에서 존재하는 속성이지만 표현적인 의미는 없습니다.

---

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

W3School src 속성

MSDN datasrc 속성

참고 URL : https://stackoverflow.com/questions/15320052/what-are-all-the-differences-between-src-and-data-src-attributes