s94-web/mjs/s94_lazy.js

常用的web工具方法封装---牧人与鱼

import s94_web from "./s94_web.js";
import s94_Scroll from "./s94_Scroll.js";

var s94_lazy = (function (global){
	let document = global?.document;
	if (!document) return console.error('缺少 document 对象！');

	var src_name = '_src';//规定图片地址自定义属性名(用于不同场景用不同图片，但_src作为默认地址必须存在)
	var offsetY = '150vh';
	var img_logo = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAMgAAADICAMAAACahl6sAAAAJ1BMVEVMaXGbm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5ubm5uPCgrwAAAADHRSTlMAgPY+0Zp2U7sjDuZ3hJVxAAABQUlEQVR42u3aSW7DMBAF0c958v3PG2RjyggEB+EibLrekisVIKoJSQIAAAAAAAAAAAAAAAAAAAAAAAAAAMAnKdktyEV76PGxKHbtwD2WJe0grocM7cCvh3hCCCHEVkgsUsjReMgcB8l4yBxr1XZIey410yFVU7QckjSl+2tOpXVJPUTTIanPU/MwfGsVXWS7m73oKuwaUt89fpNeBKsDcXQrIY+Yg1TuNoiTiZD3wiEhXoeEjFNCIiGEaD3Ejxq9+ZCam761Uq+r1kJi0FTmETcbC0l60et8U20qxGm6nrxGk6kQp59artV1mQqpumUqxLdDQpIOCWmHhEQdEuJOCcmnhBRCbO+RvFvIH+dhGxtP9hx+LXs+hhLyISFjPSRqB2k9xPHjGb8CAgAAAAAAAAAAAAAAAAAAAAAAAAAA4L98AQTya4mwS/EcAAAAAElFTkSuQmCC';
	var class_name_img = 's94_lazy_img'+(new Date()).getTime();
	var class_name_bg = 's94_lazy_bg'+(new Date()).getTime();

	let style = document.createElement('style');
	style.innerHTML = `.${class_name_img} {width: 100% !important;}
	.${class_name_bg} {background-size:100% !important;background-position-y: center !important;}`;
	document.querySelector('head').appendChild(style);

	function lazy_img(doms){
		s94_web(doms).addClass(class_name_img).each(function (){this.src = img_logo});
		doms.forEach(function (_this, i){
			s94_Scroll.on(_this, offsetY, function(){
				setTimeout(function(){
					s94_web(_this).removeClass(class_name_img);
					var _src = s94_web(_this).attr(src_name);
					_this.src = _src;
					s94_Scroll.off(_this, offsetY)
				},10);
			})
		})
	}
	function lazy_bg(doms){
		s94_web(doms).addClass(class_name_bg).each(function (){this.style.backgroundImage = 'url('+img_logo+')'});
		doms.forEach(function (_this){
			s94_Scroll.on(_this, offsetY, function(){
				setTimeout(function(){
					var cache_img = new Image();
					cache_img.parent_ele = _this;
					cache_img.onload=function(){
						s94_web(_this).removeClass(class_name_bg);
						_this.style.backgroundImage = 'url('+this.src+')';
						cache_img=null;
					};
					cache_img.src = s94_web(_this).attr(src_name);
					s94_Scroll.off(_this, offsetY)
				},10);
			})
		})
	}

	/**懒加载注册
	 * @param {Array|NodeList|String} doms 需要懒加载的元素或者选择器(String)
	 */
	function s94_lazy(doms){
		let doms_img = [], doms_bg = [];
		s94_web(doms).each(function(){
			if (this.lazy) return;
			this.lazy=true;
			if (this.tagName.toLowerCase()=='img') {
				doms_img.push(this);
			} else{
				doms_bg.push(this);
			}
		})
		doms_img.length && lazy_img(doms_img);
		doms_bg.length && lazy_bg(doms_bg);
	}

	return s94_lazy;
})(typeof globalThis !== 'undefined' ? globalThis :
	typeof self !== "undefined" ? self :
		typeof window !== "undefined" ? window :
			typeof global !== "undefined" ? global : {});

export default s94_lazy;