web-dev-qa-db-ja.com

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

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

htmlhtml5image
88
Adam Pierzchała

属性srcとdata-srcには共通点はありませんが、両方ともHTML5 CRで許可されており、両方ともsrcという文字が含まれています。それ以外はすべて異なります。

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

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

159
Jukka K. Korpela

画像に特定の画像を読み込んで表示する場合は、.srcを使用してその画像のURLを読み込みます。

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

Data-xxxx属性に関するMDNドキュメント： https://developer.mozilla.org/en-US/docs/DOM/element.dataset

画像がJPEGをロードして表示する画像タグのsrcの例：

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

代替画像のURLを保存する場所として使用される画像タグのdata-srcの例：

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

data-src属性は、HTML5で導入されたdata- *属性コレクションの一部です。 data-srcを使用すると、ブラウザには意味を持たないが、JavascriptコードまたはCSSルールで使用できる追加データを保存できます。

3
ElomSkillupsoft

最初の<img />は無効です-srcは必須属性です。 data-srcは、たとえばJavaScriptで活用できる属性ですが、表示上の意味はありません。

2
Tieson T.