74 lines
2.6 KiB
JavaScript
74 lines
2.6 KiB
JavaScript
|
||
import { asyncFunction} from '../public/api/fetch.js';
|
||
|
||
import ConfigsJs from './config.js';
|
||
const Configs = new ConfigsJs();
|
||
/*
|
||
* 调用
|
||
* 引入 LazyLoading.js
|
||
* img 绑定类名 jqlazyload
|
||
* img 绑定属性 data-wh=0.69 值根据实质需求定，因为如果图片不设置高度，offsettop 获取的值不准确
|
||
* img dat-original="真实地址"
|
||
* img src="懒加载图片"
|
||
* import LazyLoadingJs from '../class/lozyLoading';
|
||
* const LazyLoading = new LazyLoadingJs();
|
||
* LazyLoading.int()
|
||
*/
|
||
class LazyLoading {
|
||
constructor() {
|
||
// 初始化配置数据
|
||
this.arrImgDom = document.querySelectorAll('.jqlazyload');
|
||
}
|
||
|
||
int() {
|
||
var config = {
|
||
rootMargin: '0px',
|
||
threshold: 0,
|
||
}
|
||
let observer = new IntersectionObserver((entries, self) => {
|
||
entries.forEach((entry) => {
|
||
if (entry.isIntersecting) {
|
||
let domImg = entry.target
|
||
let strImgSrc = domImg.dataset.original
|
||
if (strImgSrc) {
|
||
if (strImgSrc.indexOf('encry') >= 0) {
|
||
asyncFunction(strImgSrc + '?v=' + Configs.get('COVER_VERSION'))
|
||
.then(result => {
|
||
// 异步操作成功时的回调
|
||
let base64Content = `data:image/png;base64,${result}`;
|
||
domImg.src = base64Content
|
||
this.setImgHeightFun(domImg)
|
||
})
|
||
.catch(error => {
|
||
// 异步操作失败时的回调
|
||
console.error(error);
|
||
});
|
||
} else {
|
||
domImg.src = strImgSrc
|
||
domImg.classList.remove("jqlazyload");
|
||
this.setImgHeightFun(domImg)
|
||
}
|
||
}
|
||
// 解除观察
|
||
self.unobserve(entry.target)
|
||
}
|
||
})
|
||
}, config)
|
||
|
||
this.arrImgDom.forEach((image) => {
|
||
observer.observe(image)
|
||
})
|
||
}
|
||
|
||
setImgHeightFun(element) {
|
||
let imgDataWh = element.getAttribute('data-wh')
|
||
if (imgDataWh) {
|
||
let $height = element.getBoundingClientRect().width * Number(imgDataWh)
|
||
element.style.height = $height + 'px';
|
||
}
|
||
element.classList.remove('jqlazyload');
|
||
}
|
||
}
|
||
|
||
export default LazyLoading;
|