112

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

4

5 に答える 5

189

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

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

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

于 2013-03-10T08:25:23.083 に答える
27

画像を読み込んで特定の画像を表示する場合は、を使用.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>
于 2013-03-10T07:56:03.420 に答える
8

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

于 2013-03-10T07:46:14.833 に答える
1

srcは値をすぐにレンダリングし、単一のソースとiframeを使用する画像、ビデオのデフォルトです。

data-srcは、ページの読み込み時にデフォルトの画像が読み込まれないようにするために、遅延読み込み時に使用されます。ほとんどの遅延読み込みライブラリは、交差オブザーバーを使用し、画像を読み込むときにdata-src値をsrcにコピーします。

于 2021-11-23T18:29:02.800 に答える
-5

data src属性は、ASP.NETなどのデータをバインドするために使用されます...

W3Schoolsrc属性

MSDNdatasrc属性

于 2013-03-10T07:50:58.127 に答える