js轻量图片懒加载插件和背景图片懒加载插件

偶像小之慧咿呀咿呀

已于 2024-10-08 16:48:45 修改

阅读量418

点赞数 4

文章标签： javascript 开发语言 ecmascript

于 2024-10-07 20:22:20 首次发布

本文链接：https://blog.csdn.net/m0_56362386/article/details/142744357

版权

插件使用

图片懒加载
背景图片懒加载插件

图片懒加载

图片懒加载使用的是FunLazy，网站文档，里面有详细使用介绍这里就不多说了

背景图片懒加载插件

由于FunLazy只支持图片懒加载，我用类似的方法实现了一下背景图片懒加载，js链接:http://lin123.site/js/HuiLazy.js
使用：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    div{
      /* background-image: url('https://www.lin123.site/BGI.jpg'); */
      width: 500px;
      height: 300px;
    }
#m10{
  background-image: url('https://www.zgcoder.com/funlazy/static/images/10.jpg');
}
#m11{
  background-image: url('https://www.zgcoder.com/funlazy/static/images/11.jpg');
}
#m12{
  background-image: url('https://www.zgcoder.com/funlazy/static/images/12.jpg');
}
#m13{
  background-image: url('https://www.zgcoder.com/funlazy/static/images/13.jpg');
}
  </style>
</head>
<body>
//给元素绑定data-huilazy属性
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/1.jpg" id="m1"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/2.jpg" id="m2"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/3.jpg" id="m3"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/4.jpg" id="m4"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/5.jpg" id="m5"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/6.jpg" id="m6"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/7.jpg" id="m7"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/8.jpg" id="m8"></div>
  <div data-huilazy="https://www.zgcoder.com/funlazy/static/images/9.jpg" id="m9"></div><div data-huilazy id="m10"></div>
  <div data-huilazy id="m11"></div>
  <div data-huilazy id="m12"></div><div data-huilazy id="m13"></div>
  <script src="http://lin123.site/js/HuiLazy.js"></script>//导入js
<script>
 new HuiLazy()//实例化对象
</script>
</body>
</html>

使用重点是给元素绑定data-huilazy属性，插件实例化会获取所有拥有该属性的元素，判断有没有赋值url，如果有就会监听元素是否在可视区域内，，在的话就会监听一个onload加载事件，从而判断图片有没有加载完毕，如果属性没有赋值，就会去css样式里面找有没有background-image属性从而获取图片地址。
-----------区别：
data-huilaz赋值了：会启动监听元素实现懒加载
data-huilaz没有赋值：会立即加载图片，不过在图片onload事件未完成之前会使用默认背景图片，防止网速等原因造成的图片加载缓慢影响页面美观。
--------------因为没有赋值会去找css样式里面图片地址，而页面加载css,就会加载里面的外部资源如图片或字体等，本身就会立即加载，所以做不到真正的懒加载
本插件只实现了加载成功事件和失败事件，使用方法和FunLazy差不多，如：

new HuiLazy({
  onSuccess:(el,url)=>{//加载成功事件
  //el为加载成功的元素，url为加载成功的图片地址
    console.log(el,el.style['background-image']);
  }
 })

完整代码：需要的可以自己根据情况改----献丑了

// 背景图片懒加载
!(function () {
	class HuiLazy {
		constructor({
			onSuccess, //加载成功的回调函数
			onError//加载失败回调函数
		} = {}) {
			// 使用document.querySelectorAll来获取所有带有自定义属性的元素  
			const lazyElements = document.querySelectorAll('[data-huilazy]');
		
			// lazyElements现在是一个NodeList，包含了所有匹配的元素  
			lazyElements.forEach((element) => {
				if (element.getAttribute('data-huilazy')) {//判断属性是否有值
					var observer = new IntersectionObserver((entries, observer) => {
						// 检查目标元素是否可见
						if (entries[0].isIntersecting && entries[0].intersectionRatio > 0) {
							observer.unobserve(entries[0].target);//目标元素可见就取消监听，免得重复触发
							let url = `${entries[0].target.getAttribute('data-huilazy')}`
							let img = new Image();
							img.src = url
							img.addEventListener('load', () => {
								entries[0].target.style.backgroundImage = `url(${url})`
								if (typeof onSuccess == "function") {
										this.onSuccess(onSuccess, entries[0].target, url)
								}
		
							});
							img.addEventListener('error',  ()=> {
								if (typeof onError == "function") {					
										this.onError(onError, entries[0].target, url)
								}
							});
		
							// 在这里执行元素可见时的操作  
						} else {
							// console.log('元素现在不可见！');
							// 在这里执行元素不可见时的操作（可选）  
						}
		
					}, {
						// 配置Intersection Observer的选项  
						root: null, // 将root设置为null，表示视口是滚动容器  
						rootMargin: '0px', // 边缘偏移量，可以是像'10px'、'-10%'等值  
						threshold: 0.1 // 交叉阈值，表示目标元素至少有10%是可见的  
					});
					element.style.backgroundImage = 'url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXd3d3u346CAAAADUlEQVR42gECAP3/AAAAAgABUyucMAAAAABJRU5ErkJggg==)';
					// 开始监听目标元素  
					observer.observe(element);
				} else {//无值就使用背景加载模式
					// 获取属性元素的背景图片地址
					let url = (window.getComputedStyle(element).backgroundImage).slice(4, -1).replace(/"/g, '');
					// 图片存在就监听加载
					// console.log(url);
					if (url) {
						element.style.backgroundImage = 'url(data:img/jpg;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAMAAAAoyzS7AAAAA1BMVEXd3d3u346CAAAADUlEQVR42gECAP3/AAAAAgABUyucMAAAAABJRU5ErkJggg==)';
						let img = new Image();
						img.src = url;
						img.addEventListener('load', () => {
							element.style.backgroundImage = `url(${url})`
							if (typeof onSuccess == "function") {
								this.onSuccess(onSuccess, element, url)
							}

						});
						img.addEventListener('error', ()=> {
							if (typeof onError == "function") {
								this.onError(onError, element, url)
							}
						});
					}
				}
			});

		}
		onSuccess(fun, el, url) {
			fun(el, url)
		}
		onError(fun, el, url) {
			fun(el, url)
		}
	}
	window.HuiLazy = HuiLazy

})()