快捷導(dǎo)航

JavaScript實(shí)現(xiàn)圖片懶加載的方法分析

更新時(shí)間：2018年07月05日 09:23:58 作者：king-w

這篇文章主要介紹了JavaScript實(shí)現(xiàn)圖片懶加載的方法,結(jié)合實(shí)例形式分析了javascript圖片懶加載的原理、操作步驟與相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下

本文實(shí)例講述了JavaScript實(shí)現(xiàn)圖片懶加載的方法。分享給大家供大家參考，具體如下：

懶加載是非常實(shí)用的提升網(wǎng)頁(yè)性能的方式，當(dāng)訪問(wèn)一個(gè)頁(yè)面的時(shí)候，只顯示可視區(qū)域內(nèi)的圖片，其它的圖片只有出現(xiàn)在可視區(qū)域內(nèi)的時(shí)候才會(huì)被請(qǐng)求加載。

我們現(xiàn)在用原生的js實(shí)現(xiàn)簡(jiǎn)單的圖片懶加載，主要利用的原理就是先不給設(shè)置src，而是把圖片的路徑放在data-src中，等待圖片被加載的時(shí)候?qū)⒙窂饺〕龇诺?span style="color: #0000ff">src中。

HTML代碼

<div class="container">
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img1.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img2.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img3.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img4.png">
 </div>
 <div class="img-area">
  <img class="my-photo" alt="loading" data-src="img/img5.png">
 </div>
</div>

判斷元素是否在可視區(qū)域

方法一：

1. 獲取屏幕可視區(qū)高度：document.documentElement.clientHeight
2. 獲取元素距頂部的高度：element.offsetTop
3. 獲取滾動(dòng)高度：document.documentElement.scrollTop
4. 若滿足：2-3<1,那么元素就出現(xiàn)在可視區(qū)域

方法二：

1. 獲取元素到可視區(qū)域頂部的距離：var bound = element.getBoundingClientRect()
2. 獲取可視區(qū)域的高度：window.innerHeight
3. 若滿足bound.top<=window.innerHeight,那么元素就出現(xiàn)在可視區(qū)域

方法三：

利用IntersectionObserver函數(shù)自動(dòng)觀察元素是否在可視區(qū)域內(nèi)

var watch = new IntersectionObserver(callback,option);
//開(kāi)始觀察
watch.observe(el);
//停止觀察
watch.unobserve(el);
//關(guān)閉觀察器
watch.disconnect();

js代碼

第一種很多人都用過(guò)，所以我們就用第二種寫(xiě)一下

//判斷圖片是否出現(xiàn)在可視區(qū)域內(nèi)
function isInSight(el) {
    const bound = el.getBoundingClientRect();
    const clientHeight = window.innerHeight;
    return bound.top <= clientHeight + 100;
}
//加載圖片
let index = 0;
function checkImgs() {
    const imgs = document.querySelectorAll('.my-photo');
    for( let i = index; i < imgs.length; i++){
      if(isInSight(imgs[i])){
        loadImg(imgs[i]);
        index = i;
      }
    }
}
function loadImg(el) {
    if(!el.src){
      const source = el.dataset.src;
      el.src = source;
    }
}
//函數(shù)節(jié)流
//函數(shù)節(jié)流是很重要的思想，可以防止過(guò)于頻繁的操作dom
function throttle(fn,mustRun = 500) {
    const timer = null;
    let previous = null;
    return function () {
      const now = new Date();
      const context = this;
      const args = arguments;
      if(!previous){
        previous = now;
      }
      const remaining = now -previous;
      if(mustRun && remaining >= mustRun){
        fn.apply(context,args);
        previous = now;
      }
    }
  }
//調(diào)用函數(shù)
window.onload=checkImgs;
window.onscroll = throttle(checkImgs);

我們?cè)谟玫谌N方法寫(xiě)一個(gè)demo

function checkImgs() {
 const imgs = Array.from(document.querySelectorAll(".my-photo"));
 imgs.forEach(item => io.observe(item));
}
function loadImg(el) {
 if (!el.src) {
  const source = el.dataset.src;
  el.src = source;
 }
}
const io = new IntersectionObserver(ioes => {
 ioes.forEach(ioe => {
  const el = ioe.target;
  const intersectionRatio = ioe.intersectionRatio;
  if (intersectionRatio > 0 && intersectionRatio <= 1) {
   loadImg(el);
  }
  el.onload = el.onerror = () => io.unobserve(el);
 });
});

更多關(guān)于JavaScript相關(guān)內(nèi)容感興趣的讀者可查看本站專題：《JavaScript圖片操作技巧大全》、《JavaScript運(yùn)動(dòng)效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯(cuò)誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》

希望本文所述對(duì)大家JavaScript程序設(shè)計(jì)有所幫助。

您可能感興趣的文章: