[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

發表迴響

在下方填入你的資料或按右方圖示以社群網站登入:

WordPress.com Logo

您的留言將使用 WordPress.com 帳號。 登出 / 變更 )

Twitter picture

您的留言將使用 Twitter 帳號。 登出 / 變更 )

Facebook照片

您的留言將使用 Facebook 帳號。 登出 / 變更 )

Google+ photo

您的留言將使用 Google+ 帳號。 登出 / 變更 )

連結到 %s