srcとdata-src属性の違いは何ですか？

Question

data-srcまたはsrcの属性をimgタグのどちらと使用するのが良い点と悪い点は何ですか？両方を使って同じ結果を達成できますか？もしそうなら、それぞれをいつ使うべきですか？

Answer 1

属性srcとdata-srcは、共通して何もありませんsrc。それ以外はすべて異なります。

src属性はHTML仕様で定義されており、機能的な意味を持ちます。

data-src属性は、定義された意味を持たないが、スクリプト（またはスタイリング）で使用するために要素に不可視データを含めるために使用できる無限の属性の1つです。

Answer 2

最初の<img />は無効です。srcは必須の属性です。 data-srcは、JavaScriptなどで活用できる属性ですが、プレゼンテーションの意味はありません。

まあデータのsrc属性がちょうどたとえばASP.NETのデータを結合するために使用されている

Answer 3

...

W3School src attribute

MSDN datasrc attribute

Answer 4

あなたは画像が特定の画像をロードして表示したい場合は、その画像URLを読み込むには.srcを使用してください。

URLを含むことができるメタデータ（任意のタグ）が必要な場合は、選択するdata-srcまたはdata-xxxを使用します。

データ-xxxxの属性の

MDNのドキュメント： 'データ-SRC' の

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

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

例：イメージはあなたのためのJPEGをロードし、それを表示する画像タグのsrcのhttps://developer.mozilla.org/en-US/docs/DOM/element.dataset

例イメージがまだロードされていない非画像タグに - それは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> 

例代替画像のURLを格納する場所として使用する画像タグの：彼らは両方のHTML5 CRによって許可され、彼らは両方の文字が含まれていることを除いて

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

Answer 5

data-src属性は、HTML5で導入されたdata- *属性コレクションの一部です。 data-srcは、ブラウザに意味を持たないがJavaScriptコードやCSSルールで使用できる余分なデータを格納することを可能にします。