爲什麼img標籤同時具有data-src和src？那些有什麼區別？

Question

我是一個JavaScript初學者。有誰能告訴我爲什麼有data-src和src都存在？這兩個目標分別是什麼？

還有一個問題是什麼href="javascript:;"是什麼意思？爲什麼在分號後沒有任何東西？

這裏是我的代碼：

<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-開頭的屬性都是自定義屬性。無論您認爲合適，您的應用程序都可以使用它們，但瀏覽器不會執行與它們相關的任何操作。

href值是一個空的JavaScript塊，這意味着單擊該鏈接將不會帶您到一個新的頁面，但您應該給它一個值void(0)，以確保它能正常工作。在這些情況下，您的應用程序通常會在鏈接單擊鏈接時執行某些操作的自定義點擊處理程序。該點擊處理程序可能使用值data-src。

Answer 2

data-src是data attribute。您可以閱讀關於它們的好文章here

本質上，data attributes用於存儲專用數據，僅供瀏覽器不能解析或由用戶看到的程序員使用。

在這種情況下，可能是data-src屬性鏈接到圖像的縮放版本。當點擊縮放鏈接時，一些JavaScript會檢查data attribute並更改圖像。