當一個網站圖片越多，開啟的速度也會越慢，因為網頁的讀取是由上到下，當遇到了圖片時，讀取速度上絕不會像讀取圖片一樣順暢，常常因為圖片而延遲到網站的開啟速度，對於圖多的網站真的是吃了悶虧。那是否有辦法改善這種因為圖片而造成網站開啟太慢的問題呢？
事實上，我們可以透過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部落格
![[教學]如何申請台北捷運誤點證明？](https://i1.wp.com/sofree.cc/wp-content/uploads/2024/04/20240403164113_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何申請台北捷運誤點證明？")
![[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告](https://i0.wp.com/sofree.cc/wp-content/uploads/2023/06/20230620130326_57.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]GA4 和 Google AdSense 資料串接，輕鬆掌握網站流量和收益報告")
![[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？](https://i0.wp.com/sofree.cc/wp-content/uploads/2024/04/20240402230128_0.png?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 Chrome 批次把 HEIC轉成 JPG 圖片 ？")
![[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？](https://i1.wp.com/sofree.cc/wp-content/uploads/2023/11/20231103232630_0.jpg?quality=90&zoom=2&ssl=1&resize=350%2C233 "[教學]如何用 ShowKeyPlus 查詢 Windows 10/11 產品金鑰序號？")
這功能加入後文章內圖片本身縮圖的功能就失效了＠＠ 預設 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圖比較使用前後的差異就更棒啦…