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

js圖片延遲加載(Lazyload)三種實(shí)現(xiàn)方式

 更新時(shí)間:2017年03月01日 11:58:36   作者:小小趙老漢  
這篇文章主要介紹了js延遲加載(Lazyload)三種實(shí)現(xiàn)方式,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下。

延遲加載也稱為惰性加載,即在長(zhǎng)網(wǎng)頁中延遲加載圖像。

用戶滾動(dòng)到它們之前,視口外的圖像不會(huì)加載。

這與圖像預(yù)加載相反,在長(zhǎng)網(wǎng)頁上使用延遲加載將使網(wǎng)頁加載更快。

在某些情況下,它還可以幫助減少服務(wù)器負(fù)載。

延遲加載的優(yōu)點(diǎn):

提升用戶的體驗(yàn),如果圖片數(shù)量較大,打開頁面的時(shí)候要將將頁面上所有的圖片全部獲取加載,很可能會(huì)出現(xiàn)卡頓現(xiàn)象,影響用戶體驗(yàn)。因此,有選擇性地請(qǐng)求圖片,這樣能明顯減少了服務(wù)器的壓力和流量,也能夠減小瀏覽器的負(fù)擔(dān)。

方法一

將頁面上所有圖片的src屬性設(shè)置為loading.gif,而圖片的真實(shí)路徑則設(shè)置在data-src屬性中。

當(dāng)頁面滾動(dòng)的時(shí)候計(jì)算圖片位置和滾動(dòng)的位置,當(dāng)圖片出現(xiàn)在瀏覽器視口內(nèi)時(shí),將圖片的src屬性設(shè)置為data-src的值。

<img src="loading.png" data-src="image.png">
img { display: block; margin-bottom: 50px; }
function lazyload() {
 var images = document.getElementsByTagName('img');
 var n = 0; // 用于存儲(chǔ)圖片加載到的位置,避免每次都從第一張圖片開始遍歷 
 return function() {
 var seeHeight = document.documentElement.clientHeight;
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 for(var i = n; i < images.length; i++) {
  if (images[i].offsetTop < seeHeight + scrollTop) {
  if (images[i].getAttribute('src') === 'loading.png') {
   images[i].src = images[i].getAttribute('data-src');
  }
  n = n + 1;
  }
 }
 }
}
lazyload(); //初始化首頁的頁面圖片
window.addEventListener('scroll', lazyload(), false);

方法二

上面的方法雖然沒什么問題,但是性能較差,因?yàn)楫?dāng)頁面滾動(dòng)時(shí),scroll事件會(huì)高頻觸發(fā),這非常影響瀏覽器性能。
所以,這里要對(duì)lazyload函數(shù)進(jìn)行函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)處理。

函數(shù)節(jié)流(throttle)與函數(shù)去抖(debounce)

這里html和css代碼不變,經(jīng)過throttle處理的js代碼如下:

function throttle (fn, delay, atleast) {
 var timeout = null,
  startTime = new Date();
 return function () {
 var curTime = new Date();
 clearTimeout(timeout);
 if (curTime - startTime >= atleast) {
  fn ();
  startTime = curTime;
 } else {
  timeout = setTimeout (fn, delay);
 }
 }
}

function lazyload() {
 var images = document.getElementsByTagName('img'),
  n = 0;  //存儲(chǔ)圖片加載到的位置,避免每次都從第一張圖片開始遍歷 
 return function() {
 var seeHeight = document.documentElement.clientHeight;
 var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
 for(var i = n; i < images.length; i++) {
  if(images[i].offsetTop < seeHeight + scrollTop) {
  if(images[i].getAttribute('src') === 'loading.png') {
   images[i].src = images[i].getAttribute('data-src');
  }
  n = n + 1;
  }
 }
 }
}
lazyload(); //初始化首頁的頁面圖片
window.addEventListener('scroll', throttle(lazyload(), 500, 1000), false);

方法三

目前有一個(gè)新的 IntersectionObserver API,可以自動(dòng)"觀察"元素是否可見。

用這種方法實(shí)現(xiàn)代碼非常簡(jiǎn)潔,但是許多瀏覽器不支持。

  • IntersectionObserver 傳入一個(gè)回調(diào)函數(shù),當(dāng)其觀察到元素集合出現(xiàn)時(shí)候,則會(huì)執(zhí)行該函數(shù)。
  • io.observe 即要觀察的元素,要一個(gè)個(gè)添加才可以。
  • io 管理的是一個(gè)數(shù)組,當(dāng)元素出現(xiàn)或消失的時(shí)候,數(shù)組添加或刪除該元素,并且執(zhí)行該回調(diào)函數(shù)。

function query(selector) {
 return Array.from(document.querySelectorAll(selector));
}
var io = new IntersectionObserver(function(items) {
 items.forEach(function(item) {
 var target = item.target;
 if(target.getAttribute('src') == 'loading.png') {
  target.src = target.getAttribute('data-src');
 }
 })
});
query('img').forEach(function(item) {
 io.observe(item);

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

相關(guān)文章

  • 用JavaScrpt實(shí)現(xiàn)文件夾簡(jiǎn)單輕松加密的實(shí)現(xiàn)方法圖文

    用JavaScrpt實(shí)現(xiàn)文件夾簡(jiǎn)單輕松加密的實(shí)現(xiàn)方法圖文

    電腦里經(jīng)常會(huì)存儲(chǔ)著重要文件,這些文件需要進(jìn)行加密,有許多方法來實(shí)現(xiàn)。但如果想對(duì)一個(gè)文件夾里的所有文件都進(jìn)行加密,數(shù)量少還可以,要是數(shù)量多豈不是得把人累死?
    2008-09-09
  • JavaScript 字符串常用操作小結(jié)(非常實(shí)用)

    JavaScript 字符串常用操作小結(jié)(非常實(shí)用)

    這篇文章主要介紹了JavaScript 字符串常用操作的知識(shí),包括字符串截取,查找類的方法,對(duì)js字符串操作相關(guān)知識(shí)感興趣的朋友一起學(xué)習(xí)吧
    2016-11-11
  • 學(xué)習(xí)javascript文件加載優(yōu)化

    學(xué)習(xí)javascript文件加載優(yōu)化

    這篇文章主要為大家詳細(xì)介紹了javascript文件加載優(yōu)化,三種方式實(shí)現(xiàn)js文件加載優(yōu)化,感興趣的小伙伴們可以參考一下
    2016-02-02
  • 微信小程序組件通信和behavior使用詳解

    微信小程序組件通信和behavior使用詳解

    behaviors是小程序中,用于實(shí)現(xiàn)組件間代碼共享的特性,類似于 Vue.js 中的 “mixins”,這篇文章主要介紹了微信小程序組件通信和behavior使用,需要的朋友可以參考下
    2022-08-08
  • 小程序自定義彈出框效果

    小程序自定義彈出框效果

    這篇文章主要為大家詳細(xì)介紹了小程序自定義彈出框效果,支持淡入淡出動(dòng)畫,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-07-07
  • JavaScript引用賦值與傳值賦值總結(jié)

    JavaScript引用賦值與傳值賦值總結(jié)

    這篇文章主要介紹了JavaScript引用賦值與傳值賦值總結(jié),在JavaScript中基本數(shù)據(jù)類型都是傳值賦值,復(fù)合數(shù)據(jù)類型都是引用賦值(傳地址)也叫引用傳址,下文更多相關(guān)資料,需要的小伙伴可以參考一下
    2022-05-05
  • JavaScript偏函數(shù)與柯里化實(shí)例詳解

    JavaScript偏函數(shù)與柯里化實(shí)例詳解

    這篇文章主要介紹了JavaScript偏函數(shù)與柯里化,結(jié)合實(shí)例形式詳細(xì)分析了JavaScript偏函數(shù)與柯里化的概念、原理、定義、使用方法及相關(guān)操作注意事項(xiàng),需要的朋友可以參考下
    2019-03-03
  • TypeScript中type和interface的區(qū)別及注意事項(xiàng)

    TypeScript中type和interface的區(qū)別及注意事項(xiàng)

    type的類型別用可以用戶其他的類型,比如聯(lián)合類型、元祖類型、基本類型,interface不行,下面這篇文章主要給大家介紹了關(guān)于TypeScript中type和interface的區(qū)別及注意事項(xiàng)的相關(guān)資料,需要的朋友可以參考下
    2022-10-10
  • JavaScript數(shù)組去重實(shí)現(xiàn)方法小結(jié)

    JavaScript數(shù)組去重實(shí)現(xiàn)方法小結(jié)

    這篇文章主要介紹了JavaScript數(shù)組去重實(shí)現(xiàn)方法,結(jié)合實(shí)例形式總結(jié)分析了JavaScript數(shù)組去重ES3、ES5及ES6常見實(shí)現(xiàn)方法與操作注意事項(xiàng),需要的朋友可以參考下
    2020-01-01
  • 原生Javascript插件開發(fā)實(shí)踐

    原生Javascript插件開發(fā)實(shí)踐

    本文主要介紹了原生Javascript插件開發(fā)的思路分析以及使用示例。具有一定的參考價(jià)值,下面跟著小編一起來看下吧
    2017-01-01

最新評(píng)論