タグの属性data-srcまたはタグのsrc属性の使用の違いと結果（良い点と悪い点の両方）はimg何ですか？両方を使用して同じ結果を得ることができますか？もしそうなら、いつそれぞれを使うべきですか？
タグの属性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ルールで使用できる追加データを格納できます。