Image Expander

Image Expander 的靈感來自於  gslin 的 Wretch Album Expander

最近實在愈來愈懶,所以寫了這個 script 來讓我少點幾次滑鼠 :p 它的功能是將縮圖替換為原圖,判斷方法為:

  1. 超連結的目標位址為 .jpg、 .jpeg、.png 或 .gif 結尾。
  2. 超連結的內容只有一張圖片,沒有其他物件或文字。
  3. 經由 onload() 確認圖片存在。

用 HTML 來表示的話,就是像以下架構的縮圖,才會被替換為原圖。

<a href="原圖網址"><img src="縮圖網址" /></a>

這個 script 相當容易導致網頁版面被破壞,建議在有需要時才啟動它,平常關掉比較好~

4 Comments

  1. 我是覺得既然連結都指名為jpg|gif|png (沒抓到jpeg喔XD)了,再對他作實際上的Content-Type是有點多此一舉,當然如果是為了確保正確是可行的啦 (多一份安全)。

    然後看了一下XMLHttpRequest,這邊對於非同步的部分似乎還錯滿大的。送出request後基本上就繼續執行,所以底下的if(showImage)會繼續執行下去而不等XMLHttp完成的,所以怎麼跑showImage=false。當你的XMLHttp終於完成的時候改了旗標,這時候真正要作用的程式早就跑完了……哇咧XD 比較好的解決方式是在onreadystatechange的function內來作置換的動作。

    實際上改了一下,發現還有變數的Scope問題,thisLink傳不進去onreadystatechange的function內,只好採用Closure來處理。

    其他問題嘛…

    .match() 找不到回傳 null,找的到回傳符合的字串。用 >= 0 判斷是有點奇怪。

    xhr.getResponseHeader(‘Content-Type’) 放在更裡面一點比較好喔,不然改變狀態的時候就先呼叫不少無謂的次數。

    加上上面提到的非同步問題這樣。

    附上我對於try{}區塊的改進Snippet:http://rafb.net/p/tSeCzL82.html

    1. 對,沒有取到 jpeg ,因為我覺得光是取 jpg|png|gif 就已經讓我的 XPath 冗長得要死了~ 囧rz
      作 XHR 判斷有時候是必要的,例如 Wikipedia 上的圖片。
    2. 關於 XHR 的問題…… 真的耶~ orz 我只記得寫 onreadystatechange ,卻忘了後面區塊的程式會先執行。
    3. String.match() 後面之所以有 >= 0 ,是因為我原本只打算支援 jpg ,這個地方本來是用 String.indexOf() 寫的,改用 String.match() 後卻忘了檢查…… XD
    4. 有關 xhr.getResponseHeader('Content-Type') 的位置,根據我對於 if statement 的認知,當我寫 if ( a && b && c) 時,程式會依序判斷 a, b, c 是否為 true ,一出現 false 就直接跳過,不會再對後面作判斷。
      不過我覺得拆成兩行還有比較容易讀的好處。 :)
  2. 原來這邊有回應審核機制,還以為怎麼文章都沒顯示,不會是出問題吧XD 建議寫在回應表單讓使用者知悉一下。

    實際使用時發現幾點問題,在網頁類型為 application/xhtml+xml (即XHTML),因為有了Namespace的差異,document.evaluate的第三個參數就必須動點手腳,不然這程式在XHTML標準遵循模式下是怎麼樣都沒用的。另外每個HTML元素名稱前面也要加上”xhtml:”的Namespace這樣才正常。

    Snippet: http://rafb.net/p/8KY1J514.html

  3. 感謝你的 patch。

Leave your thoughts
  • You can use some HTML in your comment.
  • Your comment may not display immediately due to spam filtering. Please wait for moderation.