當前位置：首頁 > 编程资源 > 编程问答 >内容正文

编程问答

图片的懒加载

發布時間：2025/4/16 编程问答 31 豆豆

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

圖片懶加載

網頁上圖片點到哪里圖片就加載到哪里，不用一次性加載完成

html主要頁面

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

<!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();};// 初始化外部參數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;}});// 再次調用init時，無需進行部分參數初始化if (this.lazyImages) {this.lazyImages.length !== 0 && this.removeEvent();this.lazyImages = this.lazyImages.concat(imgs);return;}// 需要懶加載的圖片this.lazyImages = imgs;// 加載時顯示的默認圖this.defaultImg = params.defaultImg;// 視口提前距離this.distance = params.distance || 0;// 存儲真實地址的標簽this.tag = params.tag || 'data-src';// 節流間隔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)

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。