อะไรคือความแตกต่างระหว่างแอตทริบิวต์ src และ data-src

อะไรคือความแตกต่างและผลที่ตามมา (ทั้งดีและไม่ดี) ของการใช้อย่างใดอย่างหนึ่งdata-srcหรือsrcแอตทริบิวต์ของimgแท็ก ฉันสามารถบรรลุผลลัพธ์เดียวกันโดยใช้ทั้งสองอย่างได้หรือไม่? ถ้าเป็นเช่นนั้นควรใช้เมื่อใด

คุณลักษณะsrcและdata-srcมีอะไรกันยกเว้นว่าพวกเขาทั้งสองได้รับอนุญาตจาก HTML5 CR srcและพวกเขาทั้งสองมีตัวอักษร อย่างอื่นแตกต่างกัน

srcแอตทริบิวต์ที่กำหนดไว้ในรายละเอียด HTML และมันมีความหมายที่ทำงาน

data-srcแอตทริบิวต์เป็นเพียงหนึ่งในชุดที่ไม่มีที่สิ้นสุดของdata-*แอตทริบิวต์ซึ่งได้กำหนดไว้ไม่มีความหมาย แต่สามารถนำมาใช้เพื่อรวมข้อมูลที่มองไม่เห็นในองค์ประกอบสำหรับใช้ในสคริปต์ (หรือจัดแต่งทรงผม)

หากคุณต้องการให้ภาพโหลดและแสดงภาพใดภาพหนึ่งให้ใช้.srcเพื่อโหลด URL ของภาพนั้น

หากคุณต้องการข้อมูลเมตา (บนแท็กใด ๆ ) ที่สามารถมี URL ได้ให้ใช้data-srcหรือสิ่งdata-xxxที่คุณต้องการเลือก

เอกสาร MDN เกี่ยวกับแอตทริบิวต์ data-xxxx: 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>

อย่างแรก<img />ไม่ถูกต้อง - srcเป็นแอตทริบิวต์ที่จำเป็น data-srcเป็นแอตทริบิวต์ที่สามารถใช้ประโยชน์จาก JavaScript ได้ แต่ไม่มีความหมายในการนำเสนอ

แอตทริบิวต์ data-src เป็นส่วนหนึ่งของคอลเลกชัน data- * attributes ที่นำมาใช้ใน HTML5 data-src ช่วยให้เราสามารถจัดเก็บข้อมูลพิเศษที่ไม่มีความหมายกับเบราว์เซอร์ แต่สามารถใช้โดย Javascript Code หรือกฎ CSS

แอตทริบิวต์ data src ใช้สำหรับการผูกข้อมูลเช่น ASP.NET ...

แอตทริบิวต์ W3School src

แอตทริบิวต์ MSDN datasrc