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 규칙에서 사용할 수있는 추가 데이터를 저장할 수 있습니다.
