Lazy Load

L2goodgood發表於2020-09-25

是一款基於 jQuery 的圖片延遲載入外掛，它可以讓瀏覽器可視區域外的圖片不載入，當滾動到它們的位置時才載入。延遲載入可以使頁面載入更快，減少伺服器的負擔，甚至是節約頻寬。
1*引入的檔案

2*在html中對於img做對應的處理
.為圖片加入樣式類名lazy 圖片路徑引用方法用data-original
Lazy Load
3.在js中lazyload配置
​$(“img.lazy”).lazyload({effect: “fadeIn”});
lazyload()引數設定:
引數 含義
placeholder:“img/grey.gif” 用圖片提前佔位
effect 載入使用何種效果值有show(直接顯示),fadeIn(淡入),slideDown(下拉)等,常用fadeIn
threshold: 200 代表頁面高度.如設定為200,表示滾動條在離目標位置還有200的高度時就開始載入圖片,可以做到不讓使用者察覺
event: ‘click’ 值有click(點選),mouseover(滑鼠劃過)可以實現滑鼠莫過或點選圖片才開始載入
container 值為某容器.lazyload預設在拉動瀏覽器滾動條時生效,這個引數可以讓你在拉動某DIV的滾動條時依次載入其中的圖片
failurelimit : 10 值為數字.lazyload預設在找到第一張不在可見區域裡的圖片時則不再繼續載入,但當HTML容器混亂的時候可能出現可見區域內圖片並沒載入出來的情況,failurelimit意在載入N張可見區域外的圖片,以避免出現這個問題

相關文章