資訊專欄INFORMATION COLUMN
摘要：是基于的輕量級高性能可配置的純并且無依賴的懶加載器，其能夠被用于進行圖片等多種形式的元素。在上，至今短短的一個月的時間，已經收獲了的。傳送門阮一峰老師使用教程懶加載懶加載其實就是延遲加載。
Lozad.js 是基于 IntersectionObserver API 的輕量級、高性能、可配置的純 JavaScript并且無依賴的懶加載器，其能夠被用于進行圖片、iframe 等多種形式的元素。通過gzip壓縮過后，僅僅535字節(jié)大小，相對于常用的jquery.lazyload.js來說，lozad.js實力碾壓，雖然jquery.lazyload.js也才幾kb大小。在github上，至今短短的一個月的時間，已經收獲了2300+的star。
懶加載傳送門：阮一峰老師IntersectionObserver使用教程
懶加載其實就是延遲加載。通俗的講就是，當你訪問一個頁面的時候，先不設置img元素或者其他元素的background-image的圖片的src（還有其他的懶加載形式），只有當它們進入視口的才開始加載，這樣可能節(jié)省帶寬從而提高網頁性能，頁面加載速度更加快、減輕服務器的壓力。
一般懶加載實現(xiàn)的方法為不設置資源文件的src，而把真是的url放置在data-url（也可根據自己喜好設置）屬性里面，這樣在載入頁面的時候不會對資源文件發(fā)起請求。當網頁滾動條滾動到需要加載這個標簽的時候，設置真實的url從而開始加載資源文件。
lozad 安裝$ npm install --save lozad //or $ yarn add lozad //or $ bower install lozad
然后根據ES6標準或者CommonJS的規(guī)范將lozad模塊引入，當然也可以用CDN引入
使用在html中，給需要懶加載的元素加上lozad的類名，并將src改為data-src，如下所示：
接下來，你所要做的就僅僅只是將lozad實例化
const observer = lozad(); observer.observe();
或者使用個性化設置：
const observer = lozad(".lozad",{
rootMargin: "10px 0px",
threshold: 0.1
});
observer.observe();
rootMargin和threshold均為IntersectionObserver的參數(shù)，具體使用參考阮一峰老師的教程吧。
要是你想要在加載該元素的同時執(zhí)行某些函數(shù)時：
lozad(".lozad",{
load: function(el){
console.log("loading element");
}
});
相似的，當你使用背景圖片的時候，你可以這么操作：
以上就是lozad的基本用法了，顯而易見，lozad相當?shù)谋憬荨?/p> 兼容性
但是lozad也并不是沒有缺點。因為它使用了IntersectionObserver的API，導致兼容性不好，chrome也剛從51版本開始使用，更不用說那些上古年代的瀏覽器了。
PC端兼容性：
移動端兼容性：
文章同步于個人小站
文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉載請注明本文地址：http://systransis.cn/yun/88997.html
摘要：前端面試題及答案總結掘金技術征文金三銀四，金九銀十，用來形容求職最好的幾個月。因為的存在，至少在被標準化的那一刻起，就支持異步編程了。然而異步編程真正發(fā)展壯大，的流行功不可沒。 showImg(https://segmentfault.com/img/bVVQOH?w=640&h=319); 1、2017前端面試題及答案總結 |掘金技術征文 金三銀四，金九銀十，用來形容求職最好的幾個月...
摘要：原創(chuàng)，基本上是界面，新加了七八個功能，解決了前輩閱讀器上的絕大部分，并成功添加路徑打包成。畢竟只是一個學習項目跨域問題本次開發(fā)使用的是代理追書神器，是不需要后臺認證直接可以跨域的接口，以實現(xiàn)在移動端顯示的效果。 應屆畢業(yè)生，目前正在找工作，簡歷需要所以開發(fā)了這個app。剛開始開發(fā)也是一臉懵逼，因為沒得后臺，一些邏輯功能也不知道怎么拓展。好在看到了追書神器api接口，頓時讓我決心做出這一...
摘要：之前在中文官方文檔使用的是。實現(xiàn)按需加載，升級之后，這個方法就走不通了。之后看了的官網，按需加載只需要神器。 之前在react-router中文官方文檔使用的是require。ensure實現(xiàn)按需加載，升級之后，這個方法就走不通了。之后看了react-router的官網，按需加載只需要神器 react-loadable 。react-loadable的好處： 基于import()的自...
閱讀 2600·2021-11-24 09:38
閱讀 2615·2019-08-30 15:54
閱讀 936·2019-08-30 15:52
閱讀 1922·2019-08-30 15:44
閱讀 2728·2019-08-30 13:48
閱讀 779·2019-08-29 16:21
閱讀 1009·2019-08-29 14:03
閱讀 2227·2019-08-28 18:15
