當(dāng)前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

图片的懒加载

發(fā)布時間：2025/4/16 编程问答 22 豆豆

生活随笔收集整理的這篇文章主要介紹了图片的懒加载小編覺得挺不錯的,現(xiàn)在分享給大家,幫大家做個參考.

圖片懶加載

網(wǎng)頁上圖片點(diǎn)到哪里圖片就加載到哪里，不用一次性加載完成

html主要頁面

直接引入js文件，src改成data-src就可以直接進(jìn)行圖片的懶加載

<!DOCTYPE html> <html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>首頁</title><style>html,body {margin: 0px;padding: 0px;}ul {margin: 0px;padding: 0px;}li {list-style: none;font-size: 0;}li img {min-height: 200px; //給個最小高度，防止圖片多次加載height: 100%;width: 100%;}</style></head><body><ul><li><img data-src="../home_page/01.jpg" /></li><li><img data-src="../home_page/02.jpg" /></li><li><img data-src="../home_page/03.jpg" /></li><li><img data-src="../home_page/04.jpg" /></li><li><img data-src="../home_page/05.jpg" /></li><li><img data-src="../home_page/06.jpg" /></li><li><img data-src="../home_page/07.jpg" /></li></ul><script src="../script/lazy-load.js"></script> </body></html>

js引入代碼

// 圖片懶加載var LazyLoad = /** @class */ (function () {function LazyLoad(options) {this.scrollListenerFn = this.scrollListenerFn.bind(this);this.resizeListenerFn = this.resizeListenerFn.bind(this);}LazyLoad.prototype.init = function (params) {this.initParams(params);if (!this.lazyImages) {return;}this.throttleTimer = null;this.defaultImg && this.addDefaultImg();this.resizeListenerFn();this.bindEvent();};// 初始化外部參數(shù)LazyLoad.prototype.initParams = function (params) {var elements = params.elements;if (!elements.length) {return;}var imgs = Array.prototype.slice.call(elements, 0);var reg = /(^|\s)lazy-bg(\s|$)/;// let reg = new RegExp('(^|\\s)' + 'lazy-bg' + '(\\s|$)')lazy-loadimgs.forEach(function (img) {if (reg.test(img.className)) {img.isBg = true;}});// 再次調(diào)用init時，無需進(jìn)行部分參數(shù)初始化if (this.lazyImages) {this.lazyImages.length !== 0 && this.removeEvent();this.lazyImages = this.lazyImages.concat(imgs);return;}// 需要懶加載的圖片this.lazyImages = imgs;// 加載時顯示的默認(rèn)圖this.defaultImg = params.defaultImg;// 視口提前距離this.distance = params.distance || 0;// 存儲真實(shí)地址的標(biāo)簽this.tag = params.tag || 'data-src';// 節(jié)流間隔this.throttle = params.throttle || 200;};LazyLoad.prototype.bindEvent = function () {document.addEventListener('scroll', this.scrollListenerFn);window.addEventListener('resize', this.resizeListenerFn);window.addEventListener('orientationchange', this.resizeListenerFn);};LazyLoad.prototype.removeEvent = function () {document.removeEventListener('scroll', this.scrollListenerFn);window.removeEventListener('resize', this.resizeListenerFn);window.removeEventListener('orientationchange', this.removeEventListener);};LazyLoad.prototype.getWH = function () {this.W = document.documentElement.clientWidth || window.innerWidth;this.H = document.documentElement.clientHeight || window.innerHeight;};LazyLoad.prototype.scrollListenerFn = function () {var _this = this;if (this.throttleTimer) {return;}this.throttleTimer = setTimeout(function () {_this.throttleTimer = null;_this.lazyLoad();}, this.throttle);};//需要獲取寬高LazyLoad.prototype.resizeListenerFn = function () {var _this = this;if (this.throttleTimer) {return;}this.throttleTimer = setTimeout(function () {_this.throttleTimer = null;_this.getWH();_this.lazyLoad();}, this.throttle);};LazyLoad.prototype.isInView = function (image) {var top = image.getBoundingClientRect().top;var left = image.getBoundingClientRect().left;var right = image.getBoundingClientRect().right;var bottom = image.getBoundingClientRect().bottom;// console.log(left <= this.W + this.distance && right >= 0 - this.distance);if (getComputedStyle(image).display !== 'none') {if (top <= this.H + this.distance &&bottom >= 0 - this.distance) {return true;} else {return false;}} else {return false;}};LazyLoad.prototype.lazyLoad = function () {var _this = this;this.lazyImages.forEach(function (image) {if (_this.isInView(image)) {_this.loader(image);}});};LazyLoad.prototype.loader = function (image) {var img = new Image();var imgUrl = image.getAttribute(this.tag);var self = this;img.onload = function (e) {self.succ(image, imgUrl);};img.src = imgUrl;};LazyLoad.prototype.addDefaultImg = function () {var _this = this;this.lazyImages.forEach(function (image) {image.isBg ?(image.style.backgroundImage = "url('" + _this.defaultImg + "')") :image.setAttribute('src', _this.defaultImg);});};LazyLoad.prototype.succ = function (image, imgUrl) {image.isBg ?(image.style.backgroundImage = "url('" + imgUrl + "')") :(image.src = imgUrl);this.lazyImages = this.lazyImages.filter(function (img) {return img !== image;});if (this.lazyImages.length === 0) {this.removeEvent();}};LazyLoad.prototype.fail = function () {};LazyLoad.prototype._hasClass = function (el, className) {var reg = new RegExp('(^|\\s)' + className + '(\\s|$)');return reg.test(el.className);};return LazyLoad; }());let lazy = new LazyLoad(); lazy.init({elements: document.getElementsByTagName('img')}) // setTimeout(function () { // lazy.init({ // elements: document.getElementsByTagName('img') // }); // }, 500)

總結(jié)

以上是生活随笔為你收集整理的图片的懒加载的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。