欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例

 更新時(shí)間:2017年06月13日 09:50:46   作者:TokenYang  
圖片懶加載也是比較常見(jiàn)的一種性能優(yōu)化的方法,本篇文章主要介紹了原生JS實(shí)現(xiàn)圖片懶加載(lazyload)實(shí)例,這里整理了詳細(xì)的代碼,有需要的小伙伴可以參考下

前言

圖片懶加載也是比較常見(jiàn)的一種性能優(yōu)化的方法,最近在用vue做一個(gè)新聞列表的客戶端時(shí)也用到了,這里就簡(jiǎn)單介紹下實(shí)現(xiàn)原理和部分代碼。

實(shí)現(xiàn)原理

加載頁(yè)面的時(shí)候,圖片一直都是流量大頭,針對(duì)圖片的性能方法也挺多的比如base64、雪碧圖等;懶加載也是其中一種,主要原理是將非首屏的圖片src設(shè)為一個(gè)默認(rèn)值,然后監(jiān)聽(tīng)窗口滾動(dòng),當(dāng)圖片出現(xiàn)在視窗中時(shí)再給他賦予真實(shí)的圖片地址,這樣可以保證首屏的加載速度然后按需加載圖片。


具體代碼

首先在渲染時(shí),圖片引用默認(rèn)圖片,然后把真實(shí)地址放在data-*屬性上面。

<image src='./../assets/default.png' :data-src='item.allPics' class='lazyloadimg'>

然后是監(jiān)聽(tīng)滾動(dòng),直接用window.onscroll就可以了,但是要注意一點(diǎn)的是類似于window的scroll和resize,還有mousemove這類觸發(fā)很頻繁的事件,最好用節(jié)流(throttle)或防抖函數(shù)(debounce)來(lái)控制一下觸發(fā)頻率。underscore和lodash里面都有封裝這兩個(gè)方法,這里先不多做介紹了。

接著要判斷圖片是否出現(xiàn)在了視窗里面,主要是三個(gè)高度:1,當(dāng)前body從頂部滾動(dòng)了多少距離。2,視窗的高度。3,當(dāng)前圖片距離頂部的距離。具體代碼如下:

window.onscroll =_.throttle(this.watchscroll, 200);
watchscroll () {
  var bodyScrollHeight = document.body.scrollTop;// body滾動(dòng)高度
  var windowHeight = window.innerHeight;// 視窗高度
  var imgs = document.getElementsByClassName('lazyloadimg');
  for (var i =0; i < imgs.length; i++) {
  var imgHeight = imgs[i].offsetTop;// 圖片距離頂部高度
  if (imgHeight < windowHeight + bodyScrollHeight) {
   imgs[i].src = imgs[i].getAttribute('data-src');
   img[i].className = img[i].className.replace('lazyloadimg','')
  }
  }
 }

結(jié)語(yǔ)

大概內(nèi)容就這么多了,下次可能會(huì)補(bǔ)充一下防抖節(jié)流源碼的實(shí)現(xiàn)。最后再補(bǔ)充兩個(gè)常見(jiàn)的滾動(dòng)判斷:

1.頁(yè)面滾動(dòng)離開(kāi)首屏(這時(shí)可顯示回到頂部的按鈕):document.body.scrollTop > window.innerHeight

2.頁(yè)面滾動(dòng)到底部了(這時(shí)可去調(diào)接口獲取更多內(nèi)容):window.scrollY + window.innerHeight > document.body.offsetHeight

以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。

相關(guān)文章

最新評(píng)論