遅延読み込みの原則
画像は<img>タグです。ブラウザが画像のリクエストを開始するかどうかは、<img>のsrc属性に基づいているため、遅延読み込みの鍵は、画像がない場合に<img>のsrcを指定しないことです。表示領域を入力します。ブラウザがリクエストを送信しないように値を割り当て、画像が表示領域に入るまで待ってから、srcに値を割り当てます。
遅延読み込みを実現するには、次の4つの手順があります。
1.読み込み中の画像を読み込みます
2.ロードする画像を決定します[キー]
3.目に見えない形で画像をロードする
4.実際の画像を置き換えます
ここにいくつかのAPI関数があります:
ページの表示領域の幅:document.body.clientWidth;
ウェブページの表示領域の高さ:document.body.clientHeight;
ウェブページの表示領域の幅:document.body.offsetWidth(サイドラインの幅を含む);
ウェブページの表示領域の高さ:document.body.offsetHeight(サイドラインの幅を含む);
ページ本文の全文幅:document.body.scrollWidth;
ページ本文の全文の高さ:document.body.scrollHeight;
スクロールされるページの高さ:document.body.scrollTop;
ページは左にスクロールされます:document.body.scrollLeft;
ページの本文:window.screenTop;
ページの本文の左側:window.screenLeft;
画面解像度の高さ:window.screen.height;
画面解像度の幅:window.screen.width;
画面上の使用可能な作業領域の高さ:window.screen.availHeight;
HTMLElement.offsetTopは読み取り専用プロパティであり、offsetParent要素の上部からの現在の要素の距離を返します。
window.innerHeight:ブラウザウィンドウのビューポートの高さ(ピクセル単位)。水平スクロールバーがある場合は、スクロールバーの高さも含まれます。
jsコードの実装
// onload是等所有的资源文件加载完毕以后再绑定事件
window.onload = function(){
// 获取图片列表,即img标签列表
var imgs = document.querySelectorAll('img');
// 获取到浏览器顶部的距离
function getTop(e){
return e.offsetTop;
}
// 懒加载实现
function lazyload(imgs){
// 可视区域高度
var h = window.innerHeight;
//滚动区域高度
var s = document.documentElement.scrollTop || document.body.scrollTop;
for(var i=0;i<imgs.length;i++){
//图片距离顶部的距离大于可视区域和滚动区域之和时懒加载
if ((h+s)>getTop(imgs[i])) {
// 真实情况是页面开始有2秒空白,所以使用setTimeout定时2s
(function(i){
setTimeout(function(){
// 不加立即执行函数i会等于9
// 隐形加载图片或其他资源,
//创建一个临时图片,这个图片在内存中不会到页面上去。实现隐形加载
var temp = new Image();
temp.src = imgs[i].getAttribute('data-src');//只会请求一次
// onload判断图片加载完毕,真是图片加载完毕,再赋值给dom节点
temp.onload = function(){
// 获取自定义属性data-src,用真图片替换假图片
imgs[i].src = imgs[i].getAttribute('data-src')
}
},2000)
})(i)
}
}
}
lazyload(imgs);
// 滚屏函数
window.onscroll =function(){
lazyload(imgs);
}
}