瀏覽 CK101 網站時,會發現需要將頁面 scroll 到特定位置時,才會誘發瀏覽器去讀取該張圖片,這樣當然可以降低 server 瞬間的負擔,讓圖片慢慢出現,但使用者就得花時間等待圖片載入,網路速度快一些的情況還 ok,要是網路慢一點,便痛苦得很。
之前曾經找了一個 GreaseMonkey 的 script — ck101 images — 來用,不過一陣子後就失效了, 懶得去改它,就自己重新研究了一下。
原理
CK101 用的方式是,在 img
tag 裡,先不指定 src
,而是將圖片網址存在 file
這個屬性裡面,等到 scroll 到定位時,再用 javascript 把 src
的屬性設定上去,這樣瀏覽器就會去把圖片讀出來。所以解法便是預先把所有的 src
都設上去。
下載安裝
目前這支 script 放在 userscripts.org 上: Preload All Images in CK101
開發
另外 GitHub 上也擺了一份: tsaiid/gm-preload-ck101-images
順道介紹 Tampermonkey
順道一提,在 Chrome 裡雖然可以直接安裝 GM scripts 變成一個 extension,但還是稍微不那麼方便,有人開發了 Chrome 下 Greasemonkey 的統合介面 — Tampermonkey,不論是管理還是開發自己的 script 都很方便。
The images in ck101 are not loaded initially. Use this script to load all images initially.
UserScript.org
http://userscripts.org/scripts/show/172168
GitHub
https://github.com/tsaiid/gm-preload-ck101-images