学生服务器_北京今天最新新闻_班级优化大师app下载_培训推广 seo

图片懒加载效果图，没有图片时默认展示require(‘@/assets/images/public/acquiesce.png’)

test.vue 文件

<template><div class="scrollLoading"><img class="img" ref="IMG" v-for="(item, i) in arr" :data-src="item.imgUrl" :src="require('@/assets/images/public/acquiesce.png')" :key="i"></div>
</template><script>
export default {data() {return {subsidiary: this.$FN.elVisible(this.fn, { visible: false, rootMargin: "0px" }),arr: [{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1aaa3886c7be24076be' },{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1d2a3886c7be24076c2' },{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e28da3886c7be24076d4' },{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1aaa3886c7be24076be' },{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1d2a3886c7be24076c2' },{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e28da3886c7be24076d4' },{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1aaa3886c7be24076be' },{ imgUrl: 'http://gmi-sz.sunther.com/file/access//6553e1d2a3886c7be24076c2' },],}},mounted() {this.getRef();},methods: {fn(target, data, subsidiary) {console.log(target, data, subsidiary,33)let src = require("@/assets/images/public/acquiesce.png");let index = Math.floor( Math.random()*8) if (target.src)  {src = this.arr[index].imgUrl;target.src = src;}subsidiary.unobserve(target);},getRef() { let refs = this.$refs.IMG; this.subsidiary(refs) },}
}
</script><style lang="less" scoped>
.img {width: 200px;height: 150px;margin: 50px;display: block;
}
</style>

public/index.js

export function elVisible(fn = () => null, config = {}) {// visible = true 元素不可见时也返回事件,否则我只需要元素可见时触发// threshold = 0 监听元素出现交叉就触发 / = 1 元素必须完全出现才触发 / = 0.5 元素出现一半就触发// rootMargin 扩张 向内或向外扩张交叉区域let { visible = false, ...rest } = config;let configs = { threshold: 0, rootMargin: "-50%", ...rest };const observe = entries => {for (const { isIntersecting = false, target = {} } of entries) {// created && created(target);if (visible) {fn && fn(target, isIntersecting)} else {isIntersecting && fn && fn(target, isIntersecting, subsidiary)};};};let subsidiary = new IntersectionObserver(observe, configs);const carryOut = refs => {let fn = item => subsidiary.observe(item.$el || item);let arrFn = () => refs && refs.map(item => subsidiary.observe(item.$el || item));switch (dataType(refs)) {case "HTMLImageElement": fn(refs); break; // 监听一个domcase "HTMLDivElement": fn(refs); break; // 监听一个domcase "Array": arrFn(refs); break; // 监听多个domdefault: return false;};};return carryOut;
};

main.js

import * as FN from '@/public';Vue.prototype.$FN = FN;