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

Question

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.com/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> 

Answer 1

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.

Answer 2

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 .