Tag: image

[JS] jquery.zoomImg.js 1.0

原本我一直不認為Javascript是一個很特別的Script Language，但是直到最近因為工作的因素所以逼不得以要去維護相關的Javascript的程式，結果沒想到Javascript竟然是如此的博大精深，甚至目前的Desktop application或是 Mobile application都開始使用Javascript來做開發。

直到最近剛結束的Coscup，我想效法一些朋友對自由軟體的態度來激勵自己，一來可以為這個世界盡一份心力，二來也可以訓練自己的能力，就當打怪練功吧:P

這個jquery.zoomImg.js 1.0是因為想要先寫好放著，等之後要做Blog的Image特效時使用的XD，不過既然有這個想法，那就打鐵趁熱，先把基本的功能刻出來，以後再做整理並加強功能吧。

這個plugin是在jquery-1.4.2.min.js的環境下開發的，不過我並沒有用到1.4才特有的一些寫法，所以應該在1.3也還能夠使用。jquery.zoomImg.js In Github

[JS] Image preload

The way a browser normally works, images are loaded only after an HTTP request is sent for them, either passively via an tag or actively through a method call.

所以這就是為什麼圖片都會有Delay抓不到的情況…因為他通常是被觸發時才會自動去抓src的圖。可是如果真的是這樣的話，那就要想個辦法來避免這個問題。不過該怎麼辦咧?

The simplest way to preload an image is to instantiate a new Image() object in JavaScript and pass it the URL of the image you want preloaded , and load it simultaneously to the page with the onLoad() event handler:

哦酷哦，直覺上的想法就是要讓頁面load完時就先onload 一個function，這樣就可以把執行時間提前，因此只要寫個function包起來讓onload去讀就可以了。

DEMO CODE:
http://gist.github.com/251380.js?file=gistfile1.js