本文實例講述了JavaScript實現(xiàn)圖片懶加載的方法。分享給大家供大家參考，具體如下：
成都創(chuàng)新互聯(lián)公司-專業(yè)網(wǎng)站定制、快速模板網(wǎng)站建設(shè)、高性價比南丹網(wǎng)站開發(fā)、企業(yè)建站全套包干低至880元,成熟完善的模板庫,直接使用。一站式南丹網(wǎng)站制作公司更省心,省錢,快速模板網(wǎng)站建設(shè)找我們，業(yè)務(wù)覆蓋南丹地區(qū)。費(fèi)用合理售后完善，十年實體公司更值得信賴。
懶加載是非常實用的提升網(wǎng)頁性能的方式，當(dāng)訪問一個頁面的時候，只顯示可視區(qū)域內(nèi)的圖片，其它的圖片只有出現(xiàn)在可視區(qū)域內(nèi)的時候才會被請求加載。
我們現(xiàn)在用原生的js實現(xiàn)簡單的圖片懶加載，主要利用的原理就是先不給設(shè)置src，而是把圖片的路徑放在data-src中，等待圖片被加載的時候?qū)⒙窂饺〕龇诺絪rc中。
HTML代碼
判斷元素是否在可視區(qū)域
方法一：
1. 獲取屏幕可視區(qū)高度：document.documentElement.clientHeight
2. 獲取元素距頂部的高度：element.offsetTop
3. 獲取滾動高度：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ù)自動觀察元素是否在可視區(qū)域內(nèi)
var watch = new IntersectionObserver(callback,option); //開始觀察 watch.observe(el); //停止觀察 watch.unobserve(el); //關(guān)閉觀察器 watch.disconnect();
js代碼
第一種很多人都用過，所以我們就用第二種寫一下
重慶分公司
重慶分公司
//判斷圖片是否出現(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é)流是很重要的思想，可以防止過于頻繁的操作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);
我們在用第三種方法寫一個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)動效果與技巧匯總》、《JavaScript切換特效與技巧總結(jié)》、《JavaScript錯誤與調(diào)試技巧總結(jié)》、《JavaScript數(shù)據(jù)結(jié)構(gòu)與算法技巧總結(jié)》、《JavaScript遍歷算法與技巧總結(jié)》及《JavaScript數(shù)學(xué)運(yùn)算用法總結(jié)》
希望本文所述對大家JavaScript程序設(shè)計有所幫助。
