您好,登錄后才能下訂單哦!
這篇文章主要介紹了web開發(fā)中如何使用圖片懶加載插件,具有一定借鑒價(jià)值,感興趣的朋友可以參考下,希望大家閱讀完這篇文章之后大有收獲,下面讓小編帶著大家一起了解一下。
示例
/* * 函數(shù)功能:函數(shù)節(jié)流 * fn 需要調(diào)用的函數(shù) * delay 函數(shù)需要延遲處理的時(shí)間 * mustRunDelay 超過該時(shí)間,函數(shù)一定會(huì)執(zhí)行 * */ var throttle = function (fn, delay, mustRunDelay) { var timer; //使用閉包存儲(chǔ)timer var t_start; //閉包返回的函數(shù) return function (val) { var args = arguments, t_curr = +new Date(); //使用+new Date() 將字符串轉(zhuǎn)換成數(shù)字 clearTimeout(timer); if (!t_start) { // 使用!t_start 如果t_start=undefined或者null 則為true t_start = t_curr; } if (t_curr - t_start >= mustRunDelay) { fn.apply(null, args); t_start = t_curr; } else { timer = setTimeout(function () { fn.apply(null, args); }, delay); } } }; /*使用方法*/ var throttle1 = throttle(fn, 500, 4000); //在該需要調(diào)用的函數(shù)內(nèi)部調(diào)用此函數(shù) throttle1(val); //此處傳人的參數(shù)為以上fn需要傳人的參數(shù)
至于函數(shù)節(jié)流具體的好處,常用的場(chǎng)景,以下文章說得非常清楚,我就不再說啦~
很多網(wǎng)站都會(huì)用到‘圖片懶加載'這種方式對(duì)網(wǎng)站進(jìn)行優(yōu)化,即延遲加載圖片或符合某些條件才開始加載圖片。于是心血來潮,決定自己手動(dòng)寫一下'圖片懶加載‘插件。
使用這個(gè)技術(shù)有什么顯著的優(yōu)點(diǎn)?
比如一個(gè)頁(yè)面中有很多圖片,如淘寶首頁(yè)等等,一個(gè)頁(yè)面有100多的圖片,如果一上來就發(fā)送這么多請(qǐng)求,頁(yè)面加載就會(huì)很漫長(zhǎng),如果js文件都放在了文檔的底部,恰巧頁(yè)面的頭部又依賴這個(gè)js文件,那就不好辦了。用戶感覺這個(gè)頁(yè)面就會(huì)很卡。
懶加載原理:瀏覽器會(huì)自動(dòng)對(duì)頁(yè)面中的img標(biāo)簽的src屬性發(fā)送請(qǐng)求并下載圖片。通過動(dòng)態(tài)改變img的src屬性實(shí)現(xiàn)。
當(dāng)訪問一個(gè)頁(yè)面的時(shí)候,先把img元素或是其他元素的背景圖片路徑替換成loading圖片地址(這樣就只需請(qǐng)求一次)
等到一定條件(這里是頁(yè)面滾動(dòng)到一定區(qū)域),用實(shí)際存放img地址的laze-load屬性的值去替換src屬性,即可實(shí)現(xiàn)'懶加載'。
//即使img的src值為空,瀏覽器也會(huì)對(duì)服務(wù)器發(fā)送請(qǐng)求。所以平時(shí)做項(xiàng)目的時(shí)候,如果img沒有用到src,就不要出現(xiàn)src這個(gè)屬性
先上三個(gè)重要的知識(shí)點(diǎn)
1.獲取屏幕可視窗口大?。?/strong>
document.documentElement.clientHeight 標(biāo)準(zhǔn)瀏覽器及低版本IE標(biāo)準(zhǔn)模式
document.body.clientHeight 低版本混雜模式
2.元素相對(duì)于文檔document頂部
element.offsetTop
3.滾動(dòng)條滾動(dòng)的距離
document.documentElement.scrollTop 兼容ie低版本的標(biāo)準(zhǔn)模式
document.body.scrollTop 兼容混雜模式;
滾動(dòng)加載:當(dāng)圖片出現(xiàn)在可視區(qū)域時(shí),動(dòng)態(tài)加載該圖片。
原理:當(dāng)圖片元素頂部是否在可視區(qū)域內(nèi),(圖片相對(duì)于文檔document頂部-滾動(dòng)條滾動(dòng)的距離)< 可視窗口大小,改變?cè)搃mg的src屬性
實(shí)現(xiàn)原理:
1.首先從所有相關(guān)元素中找出需要延時(shí)加載的元素,放在element_obj數(shù)組中。
function initElementMap() { var el = document.getElementsByTagName('img'); for (var j = 0, len2 = el.length; j < len2; j++) { //判斷當(dāng)前的img是否加載過了,或者有l(wèi)azy_src標(biāo)志 [未完成] if (typeof (el[j].getAttribute("lazy_src"))) { element_obj.push(el[j]); download_count++; } } }
2.判斷數(shù)組中的img對(duì)象,若滿足條件,則改變src屬性
function lazy() { if (!download_count) return; var innerHeight = getViewport(); for (var i = 0, len = element_obj.length; i < len; i++) { //得到圖片相對(duì)document的距上距離 var t_index = getElementViewTop(element_obj[i]); if (t_index - getScrollTop() < innerHeight) { element_obj[i].src = element_obj[i].getAttribute("lazy-src"); delete element_obj[i]; download_count--; } } }
3.滾動(dòng)的時(shí)候觸發(fā)事件,1000毫秒后執(zhí)行l(wèi)azy()方法。
window.onscroll = window.onload = function () { setTimeout(function () { lazy(); }, 1000) }
整部分代碼位于閉包自執(zhí)行函數(shù)中。相應(yīng)的方法放在init中。
var lazyLoad = (function () { function init() { initElementMap(); lazy(); }; return { init: init } })();
使用格式 :src填默認(rèn)loading圖片地址,真實(shí)的圖片地址填在lazy-src屬性里,切記需指定寬高。在外部調(diào)用 lazyLoad.init();
感謝你能夠認(rèn)真閱讀完這篇文章,希望小編分享的“web開發(fā)中如何使用圖片懶加載插件”這篇文章對(duì)大家有幫助,同時(shí)也希望大家多多支持億速云,關(guān)注億速云行業(yè)資訊頻道,更多相關(guān)知識(shí)等著你來學(xué)習(xí)!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長(zhǎng)郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。