Src ve data-src öznitelikleri arasındaki tüm farklar nelerdir?

Ya ya data-srcda etiket srcözniteliğini kullanmanın farklılıkları ve sonuçları (hem iyi hem de kötü) imgnelerdir? Her ikisini de kullanarak aynı sonuçları elde edebilir miyim? Varsa, her biri ne zaman kullanılmalıdır?

Öznitelikler srcve data-srcortak hiçbir yanı yoktur, ancak ikisine de HTML5 CR tarafından izin verilir ve her ikisi de harfleri içerir src. Diğer her şey farklı.

srcNitelik HTML özellikleri tanımlanmış ve fonksiyonel bir anlam vardır.

data-srcÖzelliği, sadece sonsuz bir dizi biridir data-*bir anlamı tanımlanan ancak komut dosyası (ya da stil) kullanım için bir eleman görünmez verileri dahil etmek için kullanılan bir nitelik,.

Görüntünün belirli bir görüntüyü yüklemesini ve görüntülemesini istiyorsanız, .srco görüntü URL'sini yüklemek için kullanın .

Bir URL içerebilecek bir meta veri parçası (herhangi bir etiket üzerinde) istiyorsanız , o zaman data-srcveya data-xxxseçmek istediğiniz herhangi birini kullanın.

Data-xxxx öznitelikleriyle ilgili MDN belgeleri: https://developer.mozilla.org/en-US/docs/DOM/element.dataset

srcGörüntünün sizin için JPEG'i yüklediği ve görüntülediği bir görüntü etiketi örneği :

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

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

Görüntünün henüz yüklenmediği, görsel olmayan bir etiket üzerindeki 'data-src' örneği - bu, div etiketindeki bir meta veri parçasıdır:

<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-srcAlternatif bir resmin URL'sini depolamak için yer olarak kullanılan bir resim etiketi örneği :

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

İlki <img />geçersiz - srcgerekli bir özelliktir. data-srcdiyelim ki JavaScript tarafından kullanılabilecek bir özelliktir, ancak sunumsal anlamı yoktur.

data-src özniteliği, HTML5'te tanıtılan veri- * öznitelikleri koleksiyonunun bir parçasıdır. data-src, tarayıcı için bir anlamı olmayan ancak Javascript Kodu veya CSS kuralları tarafından kullanılabilen fazladan verileri depolamamıza izin verir.

Veri src özniteliği yalnızca verileri bağlamak için kullanılır, örneğin ASP.NET ...

W3School src özniteliği

MSDN datasrc özniteliği