懶加載使用場景
- 圖片進(jìn)入可視區(qū)域之后請求圖片資源
- 對于電商等圖片很多,頁面很長的業(yè)務(wù)場景適用
- 減少無效的資源的加載
- 并發(fā)加載的資源過多會(huì)阻塞js 的加載,影響網(wǎng)站的正常使用
預(yù)加載的使用場景
- 圖片等靜態(tài)資源在使用之前就提前請求
- 資源使用到的時(shí)候能從緩存中加載, 提升用戶體驗(yàn)
- 頁面展示的依賴關(guān)系維護(hù)
比如Angular中就提供了懶加載 主要通過路由配置#module . 預(yù)加載,是一種預(yù)加載PreloadStrategy 服務(wù). Angular 中更多的是模塊之間的懶加載和預(yù)加載的過程
懶加載
懶加載的原生實(shí)現(xiàn)
當(dāng)我們的圖片進(jìn)入可視區(qū)域,去請求資源
需要去監(jiān)聽scroll事件,在scroll事件的回調(diào)中,去判斷我們的懶加載的圖片是否進(jìn)入可視區(qū)域.
js代碼
var viewHeight = document.documentElement.clientHeight;//可視區(qū)域高度
function lazyLoad(){
var eles = document.querySelectorAll('img[data-original][lazyload]');
Array.prototype.forEach.call(eles,function(item,index){
var rect;
console.log(item);
console.log(item.dataset);//原生js 寫的不多,原來還有這樣用法
if(item.dataset.original ===''){
return ;
}
rect = item.getBoundingClientRect();//這個(gè)也是剛學(xué)到的.
if(rect.bottom >= 0 && rect.top < viewHeight){
!function(){
var img = new Image();
img.src = item.dataset.original;
img.onload = function(){
item.src = img.src;
}
item.removeAttribute('data-original');
item.removeAttribute('lazyload');
}()
}
}
)
}
lazyLoad(); //頁面初始化需要加載一次
document.addEventListener("scroll",lazyLoad);
學(xué)習(xí)到兩句話:
第一句: 是item.dataset 本身取到的是DOMStringMap 對象
新的HTML5標(biāo)準(zhǔn)允許你在普通的元素標(biāo)簽里勒庄，嵌入類似data-*的屬性徙鱼，來實(shí)現(xiàn)一些簡單數(shù)據(jù)的存取涨共。它的數(shù)量不受限制，并且也能由javascript動(dòng)態(tài)修改胧奔，也支持CSS選擇器進(jìn)行樣式設(shè)置。
其實(shí)這么寫 data-original就是給元素設(shè)置了一個(gè)屬性, getAttribute 和 setAttribute 同樣可以用 . 因?yàn)閐ata 屬性的支持情況在IE上很糟糕 ,呵呵, 因此贫途，如果要考慮兼容性擂达，可以考慮利用 getAttribute绢淀、setAttribute存取dataset
第二句話是
getBoundingClientRect用于獲取某個(gè)元素相對于視窗的位置集合萤悴。集合中有top, right, bottom, left等屬性。
1.語法：這個(gè)方法沒有參數(shù)更啄。rectObject = object.getBoundingClientRect();
2.返回值類型：TextRectangle對象稚疹，每個(gè)矩形具有四個(gè)整數(shù)性質(zhì)（ 上居灯， 右 祭务， 下，和左 ）表示的坐標(biāo)的矩形怪嫌，以像素為單位义锥。
rectObject.top：元素上邊到視窗上邊的距離;
rectObject.right：元素右邊到視窗左邊的距離;
rectObject.bottom：元素下邊到視窗上邊的距離;
rectObject.left：元素左邊到視窗左邊的距離;
這個(gè)支持比較好 ie4以上,
css 代碼
重要的是給item 設(shè)置一個(gè)高度, 如果沒有的話. 懶加載就不成功了.因?yàn)槌跏蓟臅r(shí)候他們沒有占位置, 高度都是零. 都滿足了rect.top < viewHeight .全部都會(huì)加載出來.
.image-item{
width:40%;
margin-right:5%;
display: inline-block;
height:400px;
background:grey;
}
.image-list {
margin-left: 5%;
}
html代碼 ,圖片我是從淘寶隨便找的, 能顯示出來就行.
<div class="image-list">
<img class="image-item" src= "" lazyload="true" data-original="http://img.alicdn.com/imgextra/https://img.alicdn.com/bao/uploaded/i4/1971631275/O1CN011LHzQvuBPlCLFdg_!!1971631275.jpg_430x430q90.jpg">
<img class="image-item" src= "" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/38832490/O1CN011UGSeYa6uu2fbWJ_!!38832490.jpg_400x400.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search1.alicdn.com/img/bao/uploaded/i4/i1/2300650542/O1CN011FsH8Ctmua87iKG_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search3.alicdn.com/img/bao/uploaded/i4/i1/3262708088/O1CN0129cLqPxFvAzV4xr_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search2.alicdn.com/img/bao/uploaded/i4/i1/2735225488/O1CN011qPY4L3OPAQeN9S_!!2735225488.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search1.alicdn.com/img/bao/uploaded/i4/i4/1646111836/O1CN011PQvdX5eLy7Oc90_!!1646111836.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search3.alicdn.com/img/bao/uploaded/i4/i2/2866189752/TB2BiKXX49YBuNjy0FfXXXIsVXa_!!2866189752.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search3.alicdn.com/img/bao/uploaded/i4/i4/520233987/TB2Usn1tamWBuNjy1XaXXXCbXXa_!!520233987.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search1.alicdn.com/img/bao/uploaded/i4/i2/14738023913022489/T1EBO0Xu0gXXXXXXXX_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search1.alicdn.com/img/bao/uploaded/i4/i1/714469648/TB1SN9KXFyZBuNjt_jJXXbDlXXa_!!0-item_pic.jpg_360x360Q90.jpg_.webp">
<img class="image-item" src= "" lazyload="true" data-original="https://img.alicdn.com/imgextra/i4/1330406085146611155/TB2jcQRBdRopuFjSZFtXXcanpXa_!!0-saturn_solar.jpg_200x200.jpg">
<img class="image-item" src= "" lazyload="true" data-original="http://g-search3.alicdn.com/img/bao/uploaded/i4/i3/872172049/TB2QxUFcwHqK1RjSZFPXXcwapXa_!!872172049-0-item_pic.jpg_360x360Q90.jpg_.webp">
</div>
<script src="./lazyload.js"></script>
預(yù)加載
四種方式
- 引用一個(gè)圖片, display 設(shè)置為none
- 在js 中創(chuàng)建new Image() 然后給 img 設(shè)置src
- xmlHttpRequest 異步請求. 優(yōu)點(diǎn): 可以監(jiān)控Process 比如現(xiàn)在已經(jīng)加載了多少.便于操控, 缺點(diǎn)有跨域問題.
4.使用其他庫 比如Preload.js , 這個(gè)其實(shí)原生也是用src 或者 xmlHTTPRequest實(shí)現(xiàn),默認(rèn)是XMLHTTPRequest,
第一個(gè)就不舉例子了.
第二個(gè) 在js 中這么寫. 瀏覽器就會(huì)請求加載圖片資源
var img = new Image();
img.src = "https://img.alicdn.com/imgextra/i4/38832490/O1CN011UGSeYa6uu2fbWJ_!!38832490.jpg_400x400.jpg_.webp";
第三個(gè):
var xmlHttpRequest = new XMLHttpRequest();
xmlHttpRequest.onreadystatechange = callback;
xmlHttpRequest.onprogress = progressCallback;
xmlHttpRequest.open("GET","https://img.alicdn.com/imgextra/i4/1330406085146611155/TB2jcQRBdRopuFjSZFtXXcanpXa_!!0-saturn_solar.jpg_200x200.jpg",true);
xmlHttpRequest.responseType = "blob";
xmlHttpRequest.send();
function callback(){
if(xmlHttpRequest.readyState == 4 && xmlHttpRequest.status == 200){
var blob = this.response;
var img = document.createElement("img");
img.onload = function(e) {
window.URL.revokeObjectURL(img.src);
//在每次調(diào)用 createObjectURL() 方法時(shí)，都會(huì)創(chuàng)建一個(gè)新的 URL 對象岩灭，
// 即使你已經(jīng)用相同的對象作為參數(shù)創(chuàng)建過拌倍。當(dāng)不再需要這些 URL 對象時(shí)，
// 每個(gè)對象必須通過調(diào)用 URL.revokeObjectURL() 方法來釋放噪径。瀏覽器會(huì)在文檔退出的時(shí)候自動(dòng)釋放它們柱恤，
// 但是為了獲得最佳性能和內(nèi)存使用狀況，你應(yīng)該在安全的時(shí)機(jī)主動(dòng)釋放掉它們找爱。
};
img.src = window.URL.createObjectURL(blob); //創(chuàng)建一個(gè) DOMString梗顺，其中包含一個(gè)表示參數(shù)中給出的對象的URL。
// 這個(gè) URL 的生命周期和創(chuàng)建它的窗口中的 document 綁定车摄。這個(gè)新的URL 對象表示指定的 File 對象或 Blob 對象寺谤。
console.log(img);
document.body.appendChild(img);
}else{
console.log("Request was unsuccessful:" + xmlHttpRequest.status);
}
}
function progressCallback(e){
e = e || event;
if(e.lengthComputable){
console.log("Received " + e.loaded + " of " + e.total + " bytes");
}
}
看一下
在html中的效果
生成的效果.png
