JavaScript圖片庫

時間  2019-11-15
標籤 javascript 圖片 欄目 JavaScript 简体版
原文   原文鏈接

將圖片放到網上的方法有不少,你能夠簡單地把全部的圖片都放到網頁上。可是，若是你打算髮布的圖片過多,這個頁面很快會變的過於龐大,並且加上這些圖片後用戶要下載的的數據量就會變得至關可觀。咱們必須面對這樣一個現實:沒有人會等待很長長時間去下載一個網頁;因此利用JavaScript來建立一個圖片庫將是最佳的選擇；javascript

說下步驟:html

第一步：把整個圖片庫的連接都加載到圖片庫的主頁裏；java

第二步：當用戶點擊對應的超連接時,攔截網頁的默認行爲,即(超連接點擊跳轉行爲);node

第三步：當用戶點擊對應的超連接後,把"佔位符"圖片替換成那個超連接所對應的圖片;數組

1、代碼以下:瀏覽器

初版:app

<body>
<a href="img/index.jpg">圖片一</a><br />
    <a href="img/index.jpg" onclick="showPic(this);return false;">圖片一</a><br />
    <a href="img/index1.jpg" onclick="showPic(this);return false;">圖片二</a><br />
    <a href="img/index2.jpg" onclick="showPic(this);return false;">圖片三</a><br />
    <a href="img/index4.jpg" onclick="showPic(this);return false;">圖片四</a>
    <p>----------------------------</p>
    <img src="img/blank.png" alt="blank"/>
    <script type="text/javascript">function showPic(whichpic) {
            var source = whichpic.getAttribute('href'); //獲取目標元素的src屬性;
            var placeholder = document.getElementsByTagName('img'); //獲取佔位符圖片對象;
            placeholder.setAttribute('src', source); //圖片替換
        }
    </script>
</body>
代碼解析：onclick="showPic(this);return false;" 這段代碼表示給<a></a>標籤添加了一個onclick事件處理函數,添加處理函數的語法以下所示:
event="JavaScript statement"  JavaScript statement->方法體,this表明當前<a></a>標籤對象。
注意return false;表示阻止超連接跳轉的默認行爲；
讓咱們瞭解一下DOM1中的事件處理函數的工做機制。在給某個元素添加了事件處理函數後,一旦事件發生,相應的JavaScript代碼就會被執行。被調用的JavaScript就會返回一個值,這個值將被傳遞給那個事件處理函數。
若返回的值是true,onclick事件處理函數就認爲這個函數被點擊了,若爲false，就相反；因此加上return false，就能夠防止用戶被帶到目標連接窗口;
注意：return false；只在DOM1中適用;因此這段代碼只會在支持DOM1標準的瀏覽器中才會有效,其餘的瀏覽器任然會被帶到目標窗口！關於這個bug暫時先放一放！

2、因爲return false；在一些瀏覽器上可能看不出效果,因此我這邊換了一種方式實現JS圖片庫；代碼以下:
第二版：
<body>
    <a href="javascript:void(0);" title="img/index.jpg">圖片一</a><br />
    <a href="javascript:void(0);" title="img/index1.jpg">圖片二</a><br />
    <a href="javascript:void(0);" title="img/index2.jpg">圖片三</a><br />
    <a href="javascript:void(0);" title="img/index4.jpg">圖片四</a>
    <p>----------------------------</p>
    <img src="img/blank.png" alt="blank"/>
    <script type="text/javascript">
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                showPic(this);
            }
        }
            function showPic(whichpic) {
            var source = whichpic.getAttribute('title'); //獲取目標元素的title屬性;
            var placeholder = document.getElementsByTagName('img')[0]; //獲取佔位符圖片對象;
            placeholder.setAttribute('src', source); //圖片替換
        }
    </script>
</body>

3、在學完nodeValue屬性http://www.cnblogs.com/GreenLeaves/p/5695165.html#nodeValue後給JS圖片庫增長一個新的功能:點擊超連接把圖片的描述顯示到圖片的下面代碼以下：
第三版：
<body>
    <a href="javascript:void(0);" title="img/index.jpg">圖片一</a><br />
    <a href="javascript:void(0);" title="img/index1.jpg">圖片二</a><br />
    <a href="javascript:void(0);" title="img/index2.jpg">圖片三</a><br />
    <a href="javascript:void(0);" title="img/index4.jpg">圖片四</a>
    <p>----------------------------</p>
    <img src="img/blank.png" alt="blank"/><br />
    <p id="description">
    </p>
    <script type="text/javascript">
        var a = document.getElementsByTagName('a');
        for (var i = 0; i < a.length; i++) {
            a[i].onclick = function () {
                showPic(this);
            }
        }
        function showPic(whichpic) {
            var source = whichpic.getAttribute('title'); //獲取目標元素的title屬性;
            var placeholder = document.getElementsByTagName('img')[0]; //獲取佔位符圖片對象;
            placeholder.setAttribute('src', source); //圖片替換
            var description = document.getElementById('description');
            description.childNodes[0].nodeValue = source;
        }
    </script>
</body>
 

注意:當html代碼中<p id="description"></p>中沒有空格的時候 這句代碼會報錯,description.childNodes[0].nodeValue = source;緣由是此時的<p>標籤之間並無子節點,若在<p></p>標籤之間加一個空格,這個空格就會被解析成<p>標籤的子節點,即文本節點,這樣description.childNodes[0].nodeValue = source;不會報錯,功能完美實現;函數
 

四、在學習完JavaScript之最佳實踐後http://www.cnblogs.com/GreenLeaves/p/5701873.htm
再次對JS圖片庫進行升級,此次升級的主要目的是：性能
 

一、使圖片庫可以平穩退化(即便Broswer禁用JavaScript網頁仍能正常訪問)學習
 

二、使圖片庫能向後兼容
 

三、分離JS代碼到單獨的JS文件
 

四、重構以前的JS代碼提升JS代碼的運行性能
 

五、合理的放置JS腳本
 

六、對象檢測:即便老版本瀏覽器不支持DOM方法,網頁仍能正常運行
 

七、關鍵元素的判斷,即便關鍵元素缺失,網頁仍能正常運行
 

第四版：
 

 
 
window.onload = prepareGallery;
function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    //判斷瀏覽器是否支持DOM方法防止瀏覽器不支持網頁出現運行錯誤

    //判斷id爲imagegallery的元素是否存在,若是不存在的話網頁任能正常運行
    if (document.getElementById("imagegallery")) {
        var gallery = document.getElementById("imagegallery");
        var links = gallery.getElementsByTagName("a"); //這裏不加判斷是由於若是你連圖片都沒有,何談功能。
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function () {
                //showPic(this);
                //return false;  假設showPic方法沒有出現問題,return false是正確的作法,可是萬一shwPic出現了問題,這個時候返回false,點擊超連接將沒有任何反應,
                //因此這個地方這樣該更好
                return !showPic(this); //若是showPic方法出現問題,超連接任然有效符合JavaSciprt平穩退化的要求;
            }
        }
    }
}
function showPic(whichpic) {
    if (!document.getElementsByTagName("img")[0]) return false;
    var source=whichpic.getAttribute("href");//獲取圖片的連接地址
    var placeholder = document.getElementsByTagName("img")[0];
    if (placeholder.nodeName != "IMG") return false;
    placeholder.setAttribute("src", source);
    if (!document.getElementById("description")) return false;
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //獲取圖片名稱(判斷圖片超連接的文本節點(圖片名稱)是否存在)
    var description = document.getElementById("description");
    description.firstChild.nodeValue = text;
    return true;
}
 

 

 
 

html代碼:
 

 
 
<body>
    <div id="imagegallery">
        <a href="img/index.jpg" title="dog_one">圖片一</a><br />
        <a href="img/index1.jpg" title="dog_two">圖片二</a><br />
        <a href="img/index2.jpg" title="dog_three">圖片三</a><br />
        <a href="img/index4.jpg" title="dog_four">圖片四</a>
        <p>
            ----------------------------</p>
        <img src="img/blank.png" alt="blank" /><br />
        <p id="description">
        </p>
    </div>
    <script src="picLibrary.js" type="text/javascript"></script>  <!--合理放置了JS腳本在加載完DOM後在加載JS腳本,提升了頁面的加載速度,提現了內容優先的原則-->
</body>
 

 

 
 

 在學習完JavaScript動態向文檔中添加元素和內容後http://www.cnblogs.com/GreenLeaves/p/5730898.html
 

再從新回到咱們的圖片庫,咱們發如今咱們的htm文檔中有一個圖片和一段文字是專門爲showPic腳本服務的,若能把結構和行爲分離天然是最好的，既然這些元素的存在,是爲了讓DOM方法來處理它們,那麼用DOM方法來建立他們纔是最合適的選擇。
 

第五版：
 

 
 
window.onload = prepareGallery;
function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.createElement) return false;
 if (!document.createTextNode) return false;
    if (!document.getElementsByTagName) return false;
    //判斷瀏覽器是否支持DOM方法防止瀏覽器不支持網頁出現運行錯誤
    //判斷id爲imagegallery的元素是否存在,若是不存在的話網頁任能正常運行
    if (document.getElementById("imagegallery")) {
        var gallery = document.getElementById("imagegallery");
        var placeholder = document.createElement("img"); //建立一個圖片展現容器
        placeholder.setAttribute("id", "placeholder");
        placeholder.setAttribute("src", "../img/blank.jpg");
        var description = document.createElement("p"); //建立描述
        description.setAttribute("id", "description");
        var desctxt = document.createTextNode("chose an image");
        description.appendChild(desctxt);
        var body = document.getElementsByTagName("body")[0];
        body.appendChild(placeholder);
        body.appendChild(description);
        var links = gallery.getElementsByTagName("a"); //這裏不加判斷是由於若是你連圖片都沒有,何談功能。
        for (var i = 0; i < links.length; i++) {
            links[i].onclick = function () {
                //showPic(this);
                //return false;  假設showPic方法沒有出現問題,return false是正確的作法,可是萬一shwPic出現了問題,這個時候返回false,點擊超連接將沒有任何反應,
                //因此這個地方這樣該更好
                return !showPic(this); //若是showPic方法出現問題,超連接任然有效符合JavaSciprt平穩退化的要求;
            }
        }
    }
}
function showPic(whichpic) {
    var source = whichpic.getAttribute("href");//獲取圖片的連接地址
    placeholder.setAttribute("src", source);
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //獲取圖片名稱(判斷圖片超連接的文本節點(圖片名稱)是否存在)
    document.getElementById("description").firstChild.nodeValue = text;
    return true;
}
 

 

html代碼:
 

 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title></title>
</head>
<body>
    <div id="imagegallery">
        <a href="../img/index.jpg" title="dog_one">圖片一</a><br />
        <a href="../img/index1.jpg" title="dog_two">圖片二</a><br />
        <a href="../img/index2.jpg" title="dog_three">圖片三</a><br />
        <a href="../img/index4.jpg" title="dog_four">圖片四</a>
    </div>
    <script src="jsPic.js"></script>  <!--合理放置了JS腳本在加載完DOM後在加載JS腳本,提升了頁面的加載速度,提現了內容優先的原則-->
</body>
</html>
 

 


這個版本的圖片庫的結構和行爲分離的已經很完全了,可是仍是有個問題,由於這裏的圖片連接列表恰好是<body>部分的最後一個元素,若是在這個圖片列表以後還有其餘的一些元素？咱們該怎麼作?咱們最初的想法是想讓新建立的元素牢牢的跟在圖片清單的後面,並且無論清單出如今哪一個位置。因此這個圖片庫的版本還有待改進!
 

 
 

在學了經過insertAfter()和insertBefore()向指定元素位置的地方加入元素以後http://www.cnblogs.com/GreenLeaves/p/5731614.html
 

咱們結合以前全部的學習內容對JS圖片庫再作一次改進,代碼以下:
 

第六版：
 

utility.js  公共庫
 

 
 
/*
window.onload事件(當頁面加載完畢時須要調用的事件,也就是說當咱們在開發中須要調用一些JS函數在頁面加載完畢後執行的能夠和這個事件綁定)
可是這個事件只能綁定一個函數,若是再次綁定原先的事件會被覆蓋掉.因此這個方法就是將頁面加載完畢以後須要的函數建立一個隊列,而後將須要執行的函數一個個添加
到隊列裏面;
@param func  -須要添加到隊列裏面的函數
*/
function addOnloadEvent(func) {
    var oldonload = window.onload;
    if (typeof window.onload != "function") {
        window.onload = func; //若是window.onload事件沒有綁定任何function則正常綁定
    }
    else {
        //若是window.onload事件已經綁定了函數,則在原來的基礎上,繼續添加新的函數
        window.onload = function () {
            oldonload();
            func();
        };
    }
}


/*
addOnloadEvent的擴展版由於每次添加一個函數都須要調用addOnloadEvent()函數,因此爲了節省代碼,將須要綁定的函數名寫入到一個數組裏面,
而後將數組引用,傳遞給addOnloadEventlist();每次添加,只需將函數名,寫到數組裏面便可
@param eventlist  -須要與window.onload事件綁定的函數名數組
*/
function addOnloadEventlist(eventlist) {
    if (!eventlist) return false;
    var oldonload = window.onload;
    window.onload = function () {
        for (var i = 0; i < eventlist.length; i++) {
            eventlist[i]();
        }
    }

}


/*
向目標元素以後添加新的元素
@param newElement=新元素
@param targetElement=目標元素
*/
function insertAfter(newElement, targetElement) {
    /*
    編寫邏輯
    一、首先找到給出咱們須要插入的元素和用來定位的目標元素
    二、根據目標元素找到兩個元素的父元素
    三、判斷目標元素是否是父元素內的惟一的元素.
    四、若是是,向父元素執行追加操做,就是appendChild(newElement)
    五、若是不是,向目標元素的以後的緊接着的節點以前執行inserBefore()操做
    */
    var parentElement = targetElement.parentNode; //find parent element
    if (parentElement.lastChild == targetElement)//To determime肯定,下決心 whether the last element of the parent element is the same as the target element 
    {
        parentElement.appendChild(newElement);
    } else {
        parentElement.insertBefore(newElement, targetElement.nextSibling);
    }
}
 

 

 
 

index.js
 

 
 
function showPic(whichpic) {
    if (!document.getElementById("placeholder")) return false;
    if (!document.getElementById("description")) return false;
    var placeholder = document.getElementById("placeholder");
    var description = document.getElementById("description");
    var source = whichpic.getAttribute("href"); //獲取圖片的連接地址
    placeholder.setAttribute("src", source);
    var text = whichpic.getAttribute("title") ? whichpic.getAttribute("title") : ""; //獲取圖片名稱(判斷圖片超連接的文本節點(圖片名稱)是否存在)
    if (description.firstChild.nodeType == 3) {
        description.firstChild.nodeValue = text;
    }
    else {
        return false;
    }
    return true;
}

function preparePlaceholder() {
    if (!document.getElementById) return false;
    if (!document.createElement) return false;
    if (!document.createTextNode) return false;
    if (!document.getElementsByTagName) return false;
    //判斷瀏覽器是否支持DOM方法防止瀏覽器不支持網頁出現運行錯誤
    //判斷id爲imagegallery的元素是否存在,若是不存在的話網頁任能正常運行
    if (document.getElementById("imagegallery")) {
        var gallery = document.getElementById("imagegallery");
        var placeholder = document.createElement("img"); //建立一個圖片展現容器
        var description = document.createElement("p"); //建立描述
        var desctxt = document.createTextNode("chose an image");
        placeholder.setAttribute("id", "placeholder");
        placeholder.setAttribute("src", "../img/blank.png");
        description.setAttribute("id", "description");
        description.appendChild(desctxt);
        insertAfter(placeholder, gallery);
        insertAfter(description,placeholder);
    }
}
function prepareGallery() {
    if (!document.getElementById) return false;
    if (!document.getElementsByTagName) return false;
    if (!document.getElementById("imagegallery")) return false;
    var gallery = document.getElementById("imagegallery");
    var links = gallery.getElementsByTagName("a"); //這裏不加判斷是由於若是你連圖片都沒有,何談功能。
    for (var i = 0; i < links.length; i++) {
        links[i].onclick = function () {
            //showPic(this);
            //return false;  假設showPic方法沒有出現問題,return false是正確的作法,可是萬一shwPic出現了問題,這個時候返回false,點擊超連接將沒有任何反應,
            //因此這個地方這樣該更好
            return !showPic(this); //若是showPic方法出現問題,超連接任然有效符合JavaSciprt平穩退化的要求;
        }
    }
}
var eventlist = [preparePlaceholder, prepareGallery];
addOnloadEventlist(eventlist);
 

 

 
 

html文件:
 

 
 
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title></title>
    <script src="../js/utility.js" type="text/javascript"></script> 
    <script src="../js/index.js" type="text/javascript"></script>
</head>
<body>
    <div id="imagegallery">
        <a href="../img/index.jpg" title="dog_one">圖片一</a><br />
        <a href="../img/index1.jpg" title="dog_two">圖片二</a><br />
        <a href="../img/index2.jpg" title="dog_three">圖片三</a><br />
        <a href="../img/index4.jpg" title="dog_four">圖片四</a>
    </div>
</body>
</html>
 

 

如今圖片庫真正的作到了,結構、樣式和行爲完全分離;
 

不過、這裏還能夠作下改進，將超連接的內容改爲圖片的縮略圖、就是一個使用的圖片庫了。


        

            

        	





    

		

            
相關文章

            

                

                

                    

                

            


            
相關標籤/搜索

            
        


    

        

            

        

        

        
        

        

        

    




	

    





    

    	

    

        每日一句
    

    
    
    	每一个你不满意的现在，都有一个你没有努力的曾经。
    







    

    


    



    

        本站公眾號
    

    

           歡迎關注本站公眾號,獲取更多信息

        
    




    

    




	


	







    

        聯繫我們
        最近搜索
        最新文章
        
        沪ICP备13005482号-10

            MyBatis教程
            SQL 教程
            MySQL教程
            Java 教程
            Thymeleaf 教程
            Hibernate教程
            Spring教程 
            Redis教程