圖片懶加載插件實(shí)例分享（含解析）
在面試的時(shí)候有面試官問(wèn)我，懶加載這個(gè)插件你有沒(méi)有想到如何去優(yōu)化？又間接問(wèn)我函數(shù)節(jié)流的問(wèn)題，嘿嘿，今天就更新下這個(gè)插件，順便應(yīng)用下函數(shù)節(jié)流（throttle），先直接上下代碼，含解析
/*
* 函數(shù)功能：函數(shù)節(jié)流
* fn 需要調(diào)用的函數(shù)
* delay 函數(shù)需要延遲處理的時(shí)間
* mustRunDelay 超過(guò)該時(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)景，以下文章說(shuō)得非常清楚，我就不再說(shuō)啦～
很多網(wǎng)站都會(huì)用到‘圖片懶加載'這種方式對(duì)網(wǎng)站進(jìn)行優(yōu)化，即延遲加載圖片或符合某些條件才開(kāi)始加載圖片。于是心血來(lái)潮，決定自己手動(dòng)寫(xiě)一下'圖片懶加載‘插件。
使用這個(gè)技術(shù)有什么顯著的優(yōu)點(diǎn)？
比如一個(gè)頁(yè)面中有很多圖片，如淘寶首頁(yè)等等，一個(gè)頁(yè)面有100多的圖片，如果一上來(lái)就發(fā)送這么多請(qǐng)求，頁(yè)面加載就會(huì)很漫長(zhǎng)，如果js文件都放在了文檔的底部，恰巧頁(yè)面的頭部又依賴(lài)這個(gè)js文件，那就不好辦了。用戶(hù)感覺(jué)這個(gè)頁(yè)面就會(huì)很卡。
懶加載原理：瀏覽器會(huì)自動(dòng)對(duì)頁(yè)面中的img標(biāo)簽的src屬性發(fā)送請(qǐng)求并下載圖片。通過(guò)動(dòng)態(tài)改變img的src屬性實(shí)現(xiàn)。
當(dāng)訪問(wèn)一個(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沒(méi)有用到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是否加載過(guò)了，或者有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ì)象，若滿(mǎn)足條件，則改變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();
全部的代碼以及例子已經(jīng)上傳到github上了，地址是：https://github.com/beidan/lazeLoadImg，歡迎star
以上就是本文的全部?jī)?nèi)容，希望本文的內(nèi)容對(duì)大家的學(xué)習(xí)或者工作能帶來(lái)一定的幫助，同時(shí)也希望多多支持腳本之家！
- Javascript實(shí)現(xiàn)圖片懶加載插件的方法
- 快速實(shí)現(xiàn)JS圖片懶加載(可視區(qū)域加載)示例代碼
- JavaScript如何實(shí)現(xiàn)圖片懶加載(lazyload) 提高用戶(hù)體驗(yàn)(增強(qiáng)版)
- JavaScript實(shí)現(xiàn)圖片懶加載(Lazyload)
- 解析javascript圖片懶加載與預(yù)加載的分析總結(jié)
- jQuery+ajax實(shí)現(xiàn)滾動(dòng)到頁(yè)面底部自動(dòng)加載圖文列表效果(類(lèi)似圖片懶加載)
- javascript瀑布流式圖片懶加載實(shí)例解析與優(yōu)化
- javascript瀑布流式圖片懶加載實(shí)例
- 基于javascript實(shí)現(xiàn)圖片懶加載
- 基于jquery的圖片懶加載js
相關(guān)文章
JavaScript編寫(xiě)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘
這篇文章主要為大家詳細(xì)介紹了JavaScript編寫(xiě)開(kāi)發(fā)動(dòng)態(tài)時(shí)鐘，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-07-07
這篇文章主要給大家介紹了關(guān)于微信小程序?qū)崿F(xiàn)走馬燈效果的相關(guān)資料，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-03-03
詳解JavaScript中的before-after-hook鉤子函數(shù)
最近看別人的代碼，接觸到一個(gè)插件，before-after-hook，百度搜一圈也沒(méi)有看到什么地方有教程,本文就來(lái)簡(jiǎn)單介紹一下這個(gè)插件的使用方法，需要的可以參考一下2022-12-12
javascript支持firefox,ie7頁(yè)面布局拖拽效果代碼
javascript 拖拽 頁(yè)面拖拽 拖拽效果的頁(yè)面 超級(jí)拖拽 javascript支持firefox,ie7頁(yè)面布局拖拽效果代碼 鼠標(biāo)拖拽2007-12-12
jfinal與bootstrap的登錄跳轉(zhuǎn)實(shí)戰(zhàn)演習(xí)
這篇文章給大家分享jfinal與bootstrap之間的登錄跳轉(zhuǎn)，具體內(nèi)容包含有點(diǎn)擊登錄彈出模態(tài)框、點(diǎn)擊登錄確認(rèn)按鈕后的validate、jfinal的validate、jfinal的session管理、ajax請(qǐng)求與返回信息處理、頁(yè)面間智能跳轉(zhuǎn)。感興趣的朋友跟著小編一起看看吧2015-09-09
JavaScript是一種描述型腳本語(yǔ)言，由瀏覽器進(jìn)行動(dòng)態(tài)的解析與執(zhí)行，瀏覽器對(duì)于不同的方式有不同的解析順序，詳細(xì)介紹如下，感興趣的朋友可以參考下哈2013-05-05
在?JavaScript?中,NaN（Not-a-Number）表示一個(gè)無(wú)效的數(shù)字值,通常,它出現(xiàn)在嘗試將無(wú)法轉(zhuǎn)換為數(shù)字的值與數(shù)字進(jìn)行運(yùn)算時(shí),本文主要來(lái)聊聊如何處理JavaScript中的NaN,感興趣的可以了解下2025-01-01
js實(shí)現(xiàn)form自動(dòng)完成功能
2008-02-02
微信小程序獲取網(wǎng)絡(luò)類(lèi)型的方法示例
這篇文章主要介紹了微信小程序獲取網(wǎng)絡(luò)類(lèi)型的方法,結(jié)合完整實(shí)例形式分析了微信小程序通過(guò)wx.getNetworkType獲取網(wǎng)絡(luò)類(lèi)型的相關(guān)操作技巧,需要的朋友可以參考下2019-03-03
這篇文章主要介紹了webpack編譯速度提升之DllPlugin，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2019-02-02