perf(@vant/lazyload): remove edge 15 polyfill

This commit is contained in:
chenjiahan 2021-09-24 10:34:27 +08:00 committed by neverland
parent 3ad17abd52
commit 00b1568887
3 changed files with 161 additions and 190 deletions

View File

@ -1,70 +1,68 @@
import { h } from 'vue'; import { h } from 'vue';
import { inBrowser } from './util'; import { inBrowser } from './util';
export default (lazy) => { export default (lazy) => ({
return { props: {
props: { tag: {
tag: { type: String,
type: String, default: 'div',
default: 'div', },
},
emits: ['show'],
render() {
return h(
this.tag,
this.show && this.$slots.default ? this.$slots.default() : null
);
},
data() {
return {
el: null,
state: {
loaded: false,
}, },
rect: {},
show: false,
};
},
mounted() {
this.el = this.$el;
lazy.addLazyBox(this);
lazy.lazyLoadHandler();
},
beforeUnmount() {
lazy.removeComponent(this);
},
methods: {
getRect() {
this.rect = this.$el.getBoundingClientRect();
}, },
emits: ['show'], checkInView() {
this.getRect();
render() { return (
return h( inBrowser &&
this.tag, this.rect.top < window.innerHeight * lazy.options.preLoad &&
this.show && this.$slots.default ? this.$slots.default() : null this.rect.bottom > 0 &&
this.rect.left < window.innerWidth * lazy.options.preLoad &&
this.rect.right > 0
); );
}, },
data() { load() {
return { this.show = true;
el: null, this.state.loaded = true;
state: { this.$emit('show', this);
loaded: false,
},
rect: {},
show: false,
};
}, },
mounted() { destroy() {
this.el = this.$el; return this.$destroy;
lazy.addLazyBox(this);
lazy.lazyLoadHandler();
}, },
},
beforeUnmount() { });
lazy.removeComponent(this);
},
methods: {
getRect() {
this.rect = this.$el.getBoundingClientRect();
},
checkInView() {
this.getRect();
return (
inBrowser &&
this.rect.top < window.innerHeight * lazy.options.preLoad &&
this.rect.bottom > 0 &&
this.rect.left < window.innerWidth * lazy.options.preLoad &&
this.rect.right > 0
);
},
load() {
this.show = true;
this.state.loaded = true;
this.$emit('show', this);
},
destroy() {
return this.$destroy;
},
},
};
};

View File

@ -1,107 +1,105 @@
import { inBrowser, loadImageAsync, noop } from './util'; import { inBrowser, loadImageAsync, noop } from './util';
export default (lazyManager) => { export default (lazyManager) => ({
return { props: {
props: { src: [String, Object],
src: [String, Object], tag: {
tag: { type: String,
type: String, default: 'img',
default: 'img', },
},
render(h) {
return h(
this.tag,
{
attrs: {
src: this.renderSrc,
},
}, },
}, this.$slots.default
render(h) { );
return h( },
this.tag, data() {
{ return {
attrs: { el: null,
src: this.renderSrc, options: {
}, src: '',
}, error: '',
this.$slots.default loading: '',
); attempt: lazyManager.options.attempt,
},
data() {
return {
el: null,
options: {
src: '',
error: '',
loading: '',
attempt: lazyManager.options.attempt,
},
state: {
loaded: false,
error: false,
attempt: 0,
},
rect: {},
renderSrc: '',
};
},
watch: {
src() {
this.init();
lazyManager.addLazyBox(this);
lazyManager.lazyLoadHandler();
}, },
}, state: {
created() { loaded: false,
error: false,
attempt: 0,
},
rect: {},
renderSrc: '',
};
},
watch: {
src() {
this.init(); this.init();
this.renderSrc = this.options.loading;
},
mounted() {
this.el = this.$el;
lazyManager.addLazyBox(this); lazyManager.addLazyBox(this);
lazyManager.lazyLoadHandler(); lazyManager.lazyLoadHandler();
}, },
beforeUnmount() { },
lazyManager.removeComponent(this); created() {
this.init();
this.renderSrc = this.options.loading;
},
mounted() {
this.el = this.$el;
lazyManager.addLazyBox(this);
lazyManager.lazyLoadHandler();
},
beforeUnmount() {
lazyManager.removeComponent(this);
},
methods: {
init() {
const { src, loading, error } = lazyManager._valueFormatter(this.src);
this.state.loaded = false;
this.options.src = src;
this.options.error = error;
this.options.loading = loading;
this.renderSrc = this.options.loading;
}, },
methods: { getRect() {
init() { this.rect = this.$el.getBoundingClientRect();
const { src, loading, error } = lazyManager._valueFormatter(this.src); },
this.state.loaded = false; checkInView() {
this.options.src = src; this.getRect();
this.options.error = error; return (
this.options.loading = loading; inBrowser &&
this.renderSrc = this.options.loading; this.rect.top < window.innerHeight * lazyManager.options.preLoad &&
}, this.rect.bottom > 0 &&
getRect() { this.rect.left < window.innerWidth * lazyManager.options.preLoad &&
this.rect = this.$el.getBoundingClientRect(); this.rect.right > 0
}, );
checkInView() { },
this.getRect(); load(onFinish = noop) {
return ( if (this.state.attempt > this.options.attempt - 1 && this.state.error) {
inBrowser && if (!lazyManager.options.silent)
this.rect.top < window.innerHeight * lazyManager.options.preLoad && console.log(
this.rect.bottom > 0 && `VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`
this.rect.left < window.innerWidth * lazyManager.options.preLoad && );
this.rect.right > 0 onFinish();
); return;
}, }
load(onFinish = noop) { const { src } = this.options;
if (this.state.attempt > this.options.attempt - 1 && this.state.error) { loadImageAsync(
if (!lazyManager.options.silent) { src },
console.log( ({ src }) => {
`VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times` this.renderSrc = src;
); this.state.loaded = true;
onFinish(); },
return; () => {
this.state.attempt++;
this.renderSrc = this.options.error;
this.state.error = true;
} }
const { src } = this.options; );
loadImageAsync(
{ src },
({ src }) => {
this.renderSrc = src;
this.state.loaded = true;
},
() => {
this.state.attempt++;
this.renderSrc = this.options.error;
this.state.error = true;
}
);
},
}, },
}; },
}; });

View File

@ -1,31 +1,10 @@
const inBrowser = typeof window !== 'undefined' && window !== null; const inBrowser = typeof window !== 'undefined';
function checkIntersectionObserver() { export const hasIntersectionObserver =
if ( inBrowser &&
inBrowser && 'IntersectionObserver' in window &&
'IntersectionObserver' in window && 'IntersectionObserverEntry' in window &&
'IntersectionObserverEntry' in window && 'intersectionRatio' in window.IntersectionObserverEntry.prototype;
'intersectionRatio' in window.IntersectionObserverEntry.prototype
) {
// Minimal polyfill for Edge 15's lack of `isIntersecting`
// See: https://github.com/w3c/IntersectionObserver/issues/211
if (!('isIntersecting' in window.IntersectionObserverEntry.prototype)) {
Object.defineProperty(
window.IntersectionObserverEntry.prototype,
'isIntersecting',
{
get() {
return this.intersectionRatio > 0;
},
}
);
}
return true;
}
return false;
}
export const hasIntersectionObserver = checkIntersectionObserver();
export const modeType = { export const modeType = {
event: 'event', event: 'event',
@ -86,7 +65,7 @@ function getBestSelectionFromSrcset(el, scale) {
return [tmpWidth, tmpSrc]; return [tmpWidth, tmpSrc];
}); });
result.sort(function (a, b) { result.sort((a, b) => {
if (a[0] < b[0]) { if (a[0] < b[0]) {
return 1; return 1;
} }
@ -236,17 +215,13 @@ const loadImageAsync = (item, resolve, reject) => {
}; };
}; };
const style = (el, prop) => { const style = (el, prop) =>
return typeof getComputedStyle !== 'undefined' typeof getComputedStyle !== 'undefined'
? getComputedStyle(el, null).getPropertyValue(prop) ? getComputedStyle(el, null).getPropertyValue(prop)
: el.style[prop]; : el.style[prop];
};
const overflow = (el) => { const overflow = (el) =>
return ( style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x');
style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x')
);
};
const scrollParent = (el) => { const scrollParent = (el) => {
if (!inBrowser) return; if (!inBrowser) return;