當一個網站圖片越多,開啟的速度也會越慢,因為網頁的讀取是由上到下,當遇到了圖片時,讀取速度上絕不會像讀取圖片一樣順暢,常常因為圖片而延遲到網站的開啟速度,對於圖多的網站真的是吃了悶虧。那是否有辦法改善這種因為圖片而造成網站開啟太慢的問題呢?
事實上,我們可以透過JQuery的一個外掛「Lazy Load」來達成,當這外掛啟用後,遇到圖片時,他會先跳過,先上網頁上其它的東西優先載入,當其它的網頁物件載入完後,再換圖片進行載入,這樣就不會因為圖片的關係而讓網頁卡在圖片讀取,讓讀者閱讀上可以更順暢。
目前網路上有很多JQuery特效,如果你對JQuery有興趣,可以上網搜尋一下,你會找到很多不錯的資源。在這邊我們要向大家推薦一款我們覺得還不錯的特效外掛「Lazy Load」,如同前面提到,他可以延遲圖片的載入,算是可以稍為讓網頁讀取順暢一點,不因為圖片太大而卡住,讓網頁剩下的部分無法載入。
那當圖片延遲載入後,那什麼時候圖片會載入呢?就是當你頁面捲到(觸動到)圖片的位置時,他就會顯示出來,顯示的效果是有點漸變式,感覺蠻棒的,這個外掛只要你會調整就可以應用到各個網站,至於詳細的語法介紹,在此我們不多做說明,請有興趣的人到這網站參觀: [jQuery]外掛特輯01:Lazy Load-延遲載入網頁圖片。
那不對外掛做說明,這篇文章就要這樣敷衍結束了嗎?其實不是啦!因為JQuery很棒很厲害,可是我每次使用都碰到一堆奇怪的問題,可能我跟他無緣吧?所以我就再找看看對WordPress用戶來說是否有對應的外掛,果真被我找到了,有一款外掛就是基於「Lazy Load」的原理製作,外掛是「jQuery Image Lazy Load WP」,外掛使用上很簡單,安裝啟動就可以了,完全不需要動到程式碼。
第1步 到WordPress後台,點擊【外掛】→【新增】,然後輸入外掛名稱進行尋找。
第2步 找到「jQuery Image Lazy Load WP 」外掛,請點擊「立刻安裝」。
第3步 接下來請等待外掛下載,接著請點擊﹝啟用外掛﹞。
第4步 當你按下啟用外掛後,外掛就開始運作了,完全不需要任何設定。這外掛的做法是偵測網站上所有「img」語法,將它延遲。我們啟用外掛後可以開啟網頁原始檔案看一下。在黃色標示部分,約在33行那邊是載入JQ的外掛,在41~49行是設定可以針對哪部分的圖片進行延遲,大致上就是這樣,如果你非常了解運作原理,還可以對外掛做修改的動作喔。
展示網站:Sinchen部落格
這功能加入後文章內圖片本身縮圖的功能就失效了@@ 預設 760px 寬,加入這個外掛後他全部都放到最大了.. 是要從哪方面著手呢?
這個….. 你就要自己摸索一下了,每個版型都不同Orz
可以透過Firefox+Firebug 去觀察JS秀逗的地方去debug。
如果部落格圖床不是使用自家主機的那有必要使用Lazy Load嗎?
像是拿Picasa、Flickr當圖床呀~
或者是Jetpack內的Photon CDN 有必要使用嗎?
Lazyload 技巧的優點不僅在控管流量而已,
在使用者瀏覽時,不必等網頁上所有圖片載完便可顯示完成,有提昇體驗的好處
我用上,效果一般吧。。
使用這似乎有個問題.當網頁中有放在DIV中的圖片.而此DIV被預設為隱藏時..當觸發此DIV後.要稍微移動一下捲軸圖片才顯示的出來.不曉得有沒有解決這個的辦法?
不是啦@口@
我只是照抄木木(immmmm.com)的教學,我自己都不會寫jQuery呢……(汗)
大家好我就是圖很多的苦主。這外掛會先以看到的圖與網站的文字呈現優先顯示,之後會再背景慢慢讀取圖片(還沒看到的)。當你卷軸往下後,會再把你看到的圖片顯示出來。
放在網頁上的圖片,還是要經過處理(壓縮)才是王道。
以前也是偏愛 png的圖片,壓縮過後還是要 200K上下,
現在..全改回 JPG的圖片了,以一張 500X300 的圖片經過 photoshop再壓縮,可以到 50K左右。
以我的肉眼看,是分不出來差異,但速度快很多。
很棒的東西耶,但之前香腸為什麼會拿掉呢?不好用嗎?
嘿阿~剛好想到這個功能順便問一下香腸~~
謝啦香腸
謝謝香腸還記得小站(拜(被踹
2樓君想看大概是這個吧:http://www.rinkaiten.com/jquery_return_to_top/ 這個比較切合他的形容~
是的,可沒有這個外掛喔(笑)這需要自己上傳檔案然後自己加入代碼到相應的.php裡,有問題歡迎來問喔ノシ(夠了你賣完廣告了沒有(偷偷爬走…XDD
當遇到了圖片時,讀取速度上絕不會像讀取圖片一樣順暢???
還是?
當遇到了圖片時,讀取速度上絕不會像讀取文字一樣順暢???
不錯的外掛~~適合圖多的部落格
我記得有些網站左下角有 “回到頁首”這個功能
這個也是外掛嗎?
印象中香腸的網站以前也有用過,對嗎?
如果可以貼出一張Loading圖比較使用前後的差異就更棒啦…