blocks|key|143782|text|第一个属性无效-+src是必需属性。比方说，JavaScript可以利用data-src作为属性，但它没有表示意义。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|143783|entityMap^0|9|3|10|8|0^^$0|@$1|2|3|4|5|6|7|H|8|@$9|I|A|J|B|C]|$9|K|A|L|B|C]]|D|@]|E|$]]|$1|F|3|-4|5|6|7|M|8|@]|D|@]|E|$]]]|G|$]]

<p>The first <code>&lt;img /&gt;</code> is invalid - <code>src</code> is a required attribute. <code>data-src</code> is an attribute than can be leveraged by, say, JavaScript, but has no presentational meaning.</p>


blocks|key|143785|text|data+src属性仅用于绑定数据，例如ASP.NET……|type|unstyled|depth|inlineStyleRanges|entityRanges|data|143786|W3School+src+attribute|offset|length|143787|MSDN+datasrc+attribute|143788|entityMap|0|LINK|mutability|MUTABLE|url|http://www.w3schools.com/tags/tag_img.asp|1|http://msdn.microsoft.com/en-us/library/ms533709%2528VS.85%2529.aspx^0|0|0|M|0|0|0|M|1|0^^$0|@$1|2|3|4|5|6|7|R|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|S|8|@]|9|@$D|T|E|U|1|V]]|A|$]]|$1|F|3|G|5|6|7|W|8|@]|9|@$D|X|E|Y|1|Z]]|A|$]]|$1|H|3|-4|5|6|7|10|8|@]|9|@]|A|$]]]|I|$J|$5|K|L|M|A|$N|O]]|P|$5|K|L|M|A|$N|Q]]]]

<p>Well the data src attribute is just used for binding data for example ASP.NET ...</p>

<p><a href="http://www.w3schools.com/tags/tag_img.asp" rel="nofollow">W3School src attribute</a></p>

<p><a href="http://msdn.microsoft.com/en-us/library/ms533709%28VS.85%29.aspx" rel="nofollow">MSDN datasrc attribute</a></p>


blocks|key|143823|text|如果希望图像加载并显示特定的图像，则使用.src加载该图像的URL。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|143824|如果您想要一段可以包含URL的元数据(在任何标记上)，那么使用data-src或您想要选择的任何data-xxx。|143825|关于data-xxxx属性的MDN文档：https://developer.mozilla.org/en-US/docs/DOM/element.dataset|143826|图像标签上的src示例，其中图像为您加载并显示它：|143827|<img+id="myImage"+src="http://mydomain.com/foo.jpg">

<script>
++++var+imageUrl+=+document.getElementById("myImage").src;
</script>|code-block|syntax|javascript|143828|非图像标记上的'+data+-src‘示例，其中图像尚未加载-它只是div标记上的一段元数据：|143829|<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>|143830|用作存储备用图像的data-src的位置的图像标记上的URL示例：|143831|<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>|143832|entityMap|0|LINK|mutability|MUTABLE|url|https://developer.mozilla.org/en-US/docs/DOM/element.dataset^0|K|4|0|V|8|1C|8|0|K|1O|0|0|6|3|0|0|0|0|9|8|0|0^^$0|@$1|2|3|4|5|6|7|16|8|@$9|17|A|18|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|19|8|@$9|1A|A|1B|B|C]|$9|1C|A|1D|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|1E|8|@]|D|@$9|1F|A|1G|1|1H]]|E|$]]|$1|J|3|K|5|6|7|1I|8|@$9|1J|A|1K|B|C]]|D|@]|E|$]]|$1|L|3|M|5|N|7|1L|8|@]|D|@]|E|$O|P]]|$1|Q|3|R|5|6|7|1M|8|@]|D|@]|E|$]]|$1|S|3|T|5|N|7|1N|8|@]|D|@]|E|$O|P]]|$1|U|3|V|5|6|7|1O|8|@$9|1P|A|1Q|B|C]]|D|@]|E|$]]|$1|W|3|X|5|N|7|1R|8|@]|D|@]|E|$O|P]]|$1|Y|3|-4|5|6|7|1S|8|@]|D|@]|E|$]]]|Z|$10|$5|11|12|13|E|$14|15]]]]

<p>If you want the image to load and display a particular image, then use <code>.src</code> to load that image URL.</p>

<p>If you want a piece of meta data (on any tag) that can contain a URL, then use <code>data-src</code> or any <code>data-xxx</code> that you want to select.</p>

<p>MDN documentation on data-xxxx attributes: <a href="https://developer.mozilla.org/en-US/docs/DOM/element.dataset" rel="noreferrer">https://developer.mozilla.org/en-US/docs/DOM/element.dataset</a></p>

<p>Example of <code>src</code> on an image tag where the image loads the JPEG for you and displays it:</p>

<pre><code>&lt;img id="myImage" src="http://mydomain.com/foo.jpg"&gt;

&lt;script&gt;
    var imageUrl = document.getElementById("myImage").src;
&lt;/script&gt;
</code></pre>

<p>Example of 'data-src' on a non-image tag where the image is not loaded yet - it's just a piece of meta data on the div tag:</p>

<pre><code>&lt;div id="myDiv" data-src="http://mydomain.com/foo.jpg"&gt;

&lt;script&gt;
    // in all browsers
    var imageUrl = document.getElementById("myDiv").getAttribute("data-src");

    // or in modern browsers
    var imageUrl = document.getElementById("myDiv").dataset.src;
&lt;/script&gt;
</code></pre>

<p>Example of <code>data-src</code> on an image tag used as a place to store the URL of an alternate image:</p>

<pre><code>&lt;img id="myImage" src="http://mydomain.com/foo.jpg" data-src="http://mydomain.com/foo.jpg"&gt;

&lt;script&gt;
    var item = document.getElementById("myImage");
    // switch the image to the URL specified in data-src
    item.src = item.dataset.src;
&lt;/script&gt;
</code></pre>


blocks|key|361979|text|属性src和data-src没有任何共同之处，除了它们都是HTML5+CR允许的，并且都包含字母src。其他一切都是不同的。|type|unstyled|depth|inlineStyleRanges|offset|length|style|CODE|entityRanges|data|361980|src属性是在HTML+specs中定义的，它具有功能含义。|361981|data-src属性只是无限的data-*属性集合中的一个，这些属性没有定义的含义，但可以用来在元素中包含不可见的数据，以便在脚本(或样式)中使用。|361982|entityMap^0|2|3|6|8|1C|3|0|0|3|0|0|8|F|6|0^^$0|@$1|2|3|4|5|6|7|L|8|@$9|M|A|N|B|C]|$9|O|A|P|B|C]|$9|Q|A|R|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|S|8|@$9|T|A|U|B|C]]|D|@]|E|$]]|$1|H|3|I|5|6|7|V|8|@$9|W|A|X|B|C]|$9|Y|A|Z|B|C]]|D|@]|E|$]]|$1|J|3|-4|5|6|7|10|8|@]|D|@]|E|$]]]|K|$]]

<p>The attributes <code>src</code> and <code>data-src</code> have nothing in common, except that they are both allowed by HTML5 CR and they both contain the letters <code>src</code>. Everything else is different.</p>

<p>The <code>src</code> attribute is defined in HTML specs, and it has a functional meaning.</p>

<p>The <code>data-src</code> attribute is just one of the infinite set of <code>data-*</code> attributes, which have no defined meaning but can be used to include invisible data in an element, for use in scripting (or styling).</p>


blocks|key|143915|text|src将立即呈现该值，这是使用单一来源和iframes的图像、视频的默认设置。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|143916|在延迟加载时使用data-src，以防止在页面加载时加载默认图像。大多数延迟加载库将使用交叉点观察器，并在加载图像时将data-src值复制到src。|143917|entityMap^0|0|0^^$0|@$1|2|3|4|5|6|7|F|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|G|8|@]|9|@]|A|$]]|$1|D|3|-4|5|6|7|H|8|@]|9|@]|A|$]]]|E|$]]

<p>src will render the value immediately and it’s the default for images, videos using a single source and iframes.</p>
<p>data-src is used when lazy loading to prevent the default image from loading when the page loads. Most lazy loading libraries will use intersection observer and copy the data-src value to src when it’s time to load the image.</p>


<p>What are differences and consequences (both good and bad) of using either <code>data-src</code> or <code>src</code> attribute of <code>img</code> tag? Can I achieve the same results using both? If so, when should be used each of them?</p>


What are all the differences between src and data-src attributes?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋 

腾讯云代码助手

CODING DevOps

Cloud Studio

SDK中心

API中心

命令行工具

使用img标记的data-src或src属性有什么区别和后果(包括好的和坏的)？我可以同时使用这两种方法来达到相同的效果吗？如果是这样的话，应该在什么时候使用它们？

问src和data-src属性之间有什么区别？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问src和data-src属性之间有什么区别？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问src和data-src属性之间有什么区别？
EN