javascript - why img tag has both data-src and src? what's the difference between those? - Stack Overflow

admin管理员组

文章数量:1410724

I am a javascript beginner. Could anybody tell me why there are data-src and src both exist? What's the objective of those two, respectively?

One more problem is what href="javascript:;" mean? why there is nothing after semi-colon??

Here is my code:

<img style="width: 400px; height: 600px;" id="PicSrc" data-src=
".jpg" 
src="%E8%BD%A6_files/2013122214_59cc5328b60142f66b98nD1UtoNKWnqt.jpg"></a><a id="collect" class="collect" 
style="display: block;" 
href="javascript:;"></a>
<a id="zoom" class="zoom" style="display: block;" href="javascript:;"></a> 

I am a javascript beginner. Could anybody tell me why there are data-src and src both exist? What's the objective of those two, respectively?

One more problem is what href="javascript:;" mean? why there is nothing after semi-colon??

Here is my code:

<img style="width: 400px; height: 600px;" id="PicSrc" data-src=
"http://image.xcar./attachments/a/day_131222/2013122214_59cc5328b60142f66b98nD1UtoNKWnqt.jpg" 
src="%E8%BD%A6_files/2013122214_59cc5328b60142f66b98nD1UtoNKWnqt.jpg"></a><a id="collect" class="collect" 
style="display: block;" 
href="javascript:;"></a>
<a id="zoom" class="zoom" style="display: block;" href="javascript:;"></a> 

• javascript
• html

Share Follow edited Jan 5, 2014 at 18:12 Armel Larcier 16k77 gold badges6969 silver badges8989 bronze badges asked Jan 5, 2014 at 18:10 BenSeedangieBenSeedangie 4733 silver badges1010 bronze badges 1

• 1 html5doctor./html5-custom-data-attributes – adeneo Commented Jan 5, 2014 at 18:11

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 4

data-src is a data attribute. You can read a good article about them here

Essentially data attributes are for storing private data just for the programmer that is not interpreted by the browser or seen by the user.

In this case it's probably that the data-src attribute links to the zoomed version of the image. When the zoom link is clicked some JavaScript inspects the data attribute and alters the image.

Any attribute that starts with data- is a custom attribute. Your application can use them however you see fit, but the browser doesn't do anything specific with them.

The href value is an empty javascript block which means that clicking the link won't take you to a new page, though you should give it a value of void(0) to ensure it works correctly. In these cases your application will typically have custom click handlers on the link that execute some action when the link is clicked. That click handler may use the value of data-src.

本文标签： javascriptwhy img tag has both datasrc and src what39s the difference between thoseStack Overflow