網頁圖片延遲加載技術
2018-08-27 瀏覽:485 作者:admin 類別:網頁設計

  在手機網站上利用圖片延遲加載技術,達到加快網頁的加載速度。

  這是我要實現的目的,畢竟手機頁面小,加載速度一定要快,但又不想一個圖片一頁,讓用戶體驗性差。

  下面說下實現的過程。

  網上下載了很多的版本,很多都不能用,幾個版本比較,加上改進,我這個版本總算成行,分享給大家。

  網上有很多版本的js,比較復雜,我這里用的是jQuery,更加的方便和快捷。

  首先要下載jQuery的程序包,我在網頁下面已經提供修改過的,絕對的可用。

  適應各個版本的瀏覽器,還有手機瀏覽器

  第二步,將下載的文件解壓放到一個js目錄里面

  /js/lazyload/grey.gif

  /js/lazyload/jquery.js

  /js/lazyload/jquery.lazyload.js

  然后在需要用到特效的模板頁面中,加上以下調用代碼

  我的建議是放在head前的最后一行

  路徑地址自己更改,根據自己模板中的相應規則

  第三步:修改jquery.lazyload.js文件

  找到.context img

  這個說明下,看仔細了

  其中如果去掉.context就剩下img是延遲加載所有圖片,根據不同模板作相應改動,比如我這個模板,我只需要內容里的圖片延遲加載,所以改成.context img,這樣只延遲加載.context容器內的圖片,否則可能影響到其他圖片的加載;

  附上圖片延遲加載技術代碼下載地址

  lazyload

  最后說下里面的幾個參數

  1,用圖片提前占位

  placeholder : “img/grey.gif”,

  參數:placeholder,值為某一圖片路徑.此圖片用來占據將要加載的圖片的位置,待圖片加載時,占位圖則會隱藏

  2,載入使用何種效果

  effect : “fadeIn”,

  參數:effect(特效),值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn

  3,提前開始加載

  threshold : 200,

  參數:threshold,值為數字,代表頁面高度.如設置為200,表示滾動條在離目標位置還有200的高度時就開始加載圖片,可以做到不讓用戶察覺.

  4,事件觸發時才加載

  event : “click”,

  參數:event,值有click(點擊),mouseover(鼠標劃過),sporty(運動的),foobar(…).可以實現鼠標莫過或點擊圖片才開始加載,后兩個值未測試…

  5,對某容器中的圖片實現效果

  container: $(“#container”),

  參數:container,值為某容器.lazyload默認在拉動瀏覽器滾動條時生效,這個參數可以讓你在拉動某DIV的滾動條時依次加載其中的圖片

  6,圖片排序混亂時

  failurelimit : 10,

  參數:failurelimit,值為數字.lazyload默認在找到第一張不在可見區域里的圖片時則不再繼續加載,但當HTML容器混亂的時候可能出現可見區域內圖片并沒加載出來的情況,failurelimit意在加載N張可見區域外的圖片,以避免出現這個問題.

點擊這里給我發消息