टैग के गुण data-srcया srcगुण के अंतर और परिणाम (अच्छे और बुरे दोनों) क्या हैं img? क्या मैं दोनों का उपयोग करके समान परिणाम प्राप्त कर सकता हूं? यदि हां, तो उनमें से प्रत्येक का उपयोग कब किया जाना चाहिए?
टैग के गुण data-srcया srcगुण के अंतर और परिणाम (अच्छे और बुरे दोनों) क्या हैं img? क्या मैं दोनों का उपयोग करके समान परिणाम प्राप्त कर सकता हूं? यदि हां, तो उनमें से प्रत्येक का उपयोग कब किया जाना चाहिए?
जवाबों:
विशेषताएँ srcऔर data-srcआम में कुछ भी नहीं है, सिवाय इसके कि वे दोनों एचटीएमएल 5 सीआर द्वारा अनुमत हैं और उन दोनों में अक्षर हैं src। बाकी सब कुछ अलग है।
srcविशेषता एचटीएमएल चश्मा में परिभाषित किया गया है, और यह एक कार्यात्मक अर्थ नहीं है।
यह data-srcविशेषता गुणों के अनंत सेट में से एक data-*है, जिसका कोई परिभाषित अर्थ नहीं है, लेकिन इसका उपयोग किसी तत्व में अदृश्य डेटा को शामिल करने के लिए किया जा सकता है, स्क्रिप्टिंग (या स्टाइलिंग) में उपयोग के लिए।
यदि आप चाहते हैं कि छवि किसी विशेष छवि को लोड और प्रदर्शित करे, तो .srcउस छवि URL को लोड करने के लिए उपयोग करें।
यदि आप मेटा डेटा (किसी भी टैग पर) का एक टुकड़ा चाहते हैं जिसमें एक URL हो सकता है, तो उपयोग करें data-srcया कोई भी data-xxxजिसे आप चुनना चाहते हैं।
डेटा- 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>गैर-छवि टैग पर 'डेटा-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जावास्क्रिप्ट की मानें तो इसका एक विशेषता है, लेकिन इसका कोई अर्थ नहीं है।
srcशामिल होना चाहिए। आप data-एक स्क्रिप्टिंग भाषा (जावास्क्रिप्ट की तरह) का लाभ उठाने के लिए अतिरिक्त डेटा जोड़ने के लिए विशेषताओं का उपयोग करते हैं ।
data-src विशेषता डेटा का हिस्सा है- * HTML5 में प्रस्तुत गुण संग्रह। data-src हमें अतिरिक्त डेटा संग्रहीत करने की अनुमति देता है जिसका ब्राउज़र के लिए कोई अर्थ नहीं है लेकिन इसका उपयोग जावास्क्रिप्ट कोड या सीएसएस नियमों द्वारा किया जा सकता है।
खैर डेटा src विशेषता सिर्फ ASP.NET उदाहरण के लिए डेटा बाध्यकारी के लिए प्रयोग किया जाता है ...