Preload All Images in CK101

瀏覽 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