1. 引入jquery.lazyload.js, 須要先引入jquery.js
2. img便籤裏面加上 data-original = 「xxxxx.jpg」 這一個標籤,裏面填寫圖片地址(注意:img標籤須要給他設定長寬,經過html或者css均可以,不然可能出bug)
3. 啓用插件的方法也是比較簡單的。$("img.lazy").lazyload();
4. 設置一些參數
threshold : 200 : 暫時不須要加載的圖片,先加載200像素
triger: click/mouserover : 觸發事件
effect: fadeIn : 出現效果
skip_invisible : false/true : 假若有的圖片應該已經加載了,可是因爲某寫緣由,他仍是隱藏了,那麼假如你加入須要這種圖片也能出來,那麼能夠用這個屬性css
源碼下載:https://raw.githubusercontent.com/tuupola/jquery_lazyload/master/jquery.lazyload.js
官方文檔:http://www.appelsiini.net/projects/lazyloadhtml