mirror of
https://gitee.com/vant-contrib/vant.git
synced 2025-04-06 03:57:59 +08:00
perf(@vant/lazyload): remove edge 15 polyfill
This commit is contained in:
parent
3ad17abd52
commit
00b1568887
@ -1,70 +1,68 @@
|
||||
import { h } from 'vue';
|
||||
import { inBrowser } from './util';
|
||||
|
||||
export default (lazy) => {
|
||||
return {
|
||||
props: {
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'div',
|
||||
export default (lazy) => ({
|
||||
props: {
|
||||
tag: {
|
||||
type: String,
|
||||
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'],
|
||||
|
||||
render() {
|
||||
return h(
|
||||
this.tag,
|
||||
this.show && this.$slots.default ? this.$slots.default() : null
|
||||
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
|
||||
);
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
el: null,
|
||||
state: {
|
||||
loaded: false,
|
||||
},
|
||||
rect: {},
|
||||
show: false,
|
||||
};
|
||||
load() {
|
||||
this.show = true;
|
||||
this.state.loaded = true;
|
||||
this.$emit('show', this);
|
||||
},
|
||||
|
||||
mounted() {
|
||||
this.el = this.$el;
|
||||
lazy.addLazyBox(this);
|
||||
lazy.lazyLoadHandler();
|
||||
destroy() {
|
||||
return this.$destroy;
|
||||
},
|
||||
|
||||
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;
|
||||
},
|
||||
},
|
||||
};
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@ -1,107 +1,105 @@
|
||||
import { inBrowser, loadImageAsync, noop } from './util';
|
||||
|
||||
export default (lazyManager) => {
|
||||
return {
|
||||
props: {
|
||||
src: [String, Object],
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'img',
|
||||
export default (lazyManager) => ({
|
||||
props: {
|
||||
src: [String, Object],
|
||||
tag: {
|
||||
type: String,
|
||||
default: 'img',
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
return h(
|
||||
this.tag,
|
||||
{
|
||||
attrs: {
|
||||
src: this.renderSrc,
|
||||
},
|
||||
},
|
||||
},
|
||||
render(h) {
|
||||
return h(
|
||||
this.tag,
|
||||
{
|
||||
attrs: {
|
||||
src: this.renderSrc,
|
||||
},
|
||||
},
|
||||
this.$slots.default
|
||||
);
|
||||
},
|
||||
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();
|
||||
this.$slots.default
|
||||
);
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
el: null,
|
||||
options: {
|
||||
src: '',
|
||||
error: '',
|
||||
loading: '',
|
||||
attempt: lazyManager.options.attempt,
|
||||
},
|
||||
},
|
||||
created() {
|
||||
state: {
|
||||
loaded: false,
|
||||
error: false,
|
||||
attempt: 0,
|
||||
},
|
||||
rect: {},
|
||||
renderSrc: '',
|
||||
};
|
||||
},
|
||||
watch: {
|
||||
src() {
|
||||
this.init();
|
||||
this.renderSrc = this.options.loading;
|
||||
},
|
||||
mounted() {
|
||||
this.el = this.$el;
|
||||
lazyManager.addLazyBox(this);
|
||||
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: {
|
||||
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;
|
||||
},
|
||||
getRect() {
|
||||
this.rect = this.$el.getBoundingClientRect();
|
||||
},
|
||||
checkInView() {
|
||||
this.getRect();
|
||||
return (
|
||||
inBrowser &&
|
||||
this.rect.top < window.innerHeight * lazyManager.options.preLoad &&
|
||||
this.rect.bottom > 0 &&
|
||||
this.rect.left < window.innerWidth * lazyManager.options.preLoad &&
|
||||
this.rect.right > 0
|
||||
);
|
||||
},
|
||||
load(onFinish = noop) {
|
||||
if (this.state.attempt > this.options.attempt - 1 && this.state.error) {
|
||||
if (!lazyManager.options.silent)
|
||||
console.log(
|
||||
`VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`
|
||||
);
|
||||
onFinish();
|
||||
return;
|
||||
getRect() {
|
||||
this.rect = this.$el.getBoundingClientRect();
|
||||
},
|
||||
checkInView() {
|
||||
this.getRect();
|
||||
return (
|
||||
inBrowser &&
|
||||
this.rect.top < window.innerHeight * lazyManager.options.preLoad &&
|
||||
this.rect.bottom > 0 &&
|
||||
this.rect.left < window.innerWidth * lazyManager.options.preLoad &&
|
||||
this.rect.right > 0
|
||||
);
|
||||
},
|
||||
load(onFinish = noop) {
|
||||
if (this.state.attempt > this.options.attempt - 1 && this.state.error) {
|
||||
if (!lazyManager.options.silent)
|
||||
console.log(
|
||||
`VueLazyload log: ${this.options.src} tried too more than ${this.options.attempt} times`
|
||||
);
|
||||
onFinish();
|
||||
return;
|
||||
}
|
||||
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;
|
||||
}
|
||||
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;
|
||||
}
|
||||
);
|
||||
},
|
||||
);
|
||||
},
|
||||
};
|
||||
};
|
||||
},
|
||||
});
|
||||
|
@ -1,31 +1,10 @@
|
||||
const inBrowser = typeof window !== 'undefined' && window !== null;
|
||||
const inBrowser = typeof window !== 'undefined';
|
||||
|
||||
function checkIntersectionObserver() {
|
||||
if (
|
||||
inBrowser &&
|
||||
'IntersectionObserver' in window &&
|
||||
'IntersectionObserverEntry' in window &&
|
||||
'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 hasIntersectionObserver =
|
||||
inBrowser &&
|
||||
'IntersectionObserver' in window &&
|
||||
'IntersectionObserverEntry' in window &&
|
||||
'intersectionRatio' in window.IntersectionObserverEntry.prototype;
|
||||
|
||||
export const modeType = {
|
||||
event: 'event',
|
||||
@ -86,7 +65,7 @@ function getBestSelectionFromSrcset(el, scale) {
|
||||
return [tmpWidth, tmpSrc];
|
||||
});
|
||||
|
||||
result.sort(function (a, b) {
|
||||
result.sort((a, b) => {
|
||||
if (a[0] < b[0]) {
|
||||
return 1;
|
||||
}
|
||||
@ -236,17 +215,13 @@ const loadImageAsync = (item, resolve, reject) => {
|
||||
};
|
||||
};
|
||||
|
||||
const style = (el, prop) => {
|
||||
return typeof getComputedStyle !== 'undefined'
|
||||
const style = (el, prop) =>
|
||||
typeof getComputedStyle !== 'undefined'
|
||||
? getComputedStyle(el, null).getPropertyValue(prop)
|
||||
: el.style[prop];
|
||||
};
|
||||
|
||||
const overflow = (el) => {
|
||||
return (
|
||||
style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x')
|
||||
);
|
||||
};
|
||||
const overflow = (el) =>
|
||||
style(el, 'overflow') + style(el, 'overflow-y') + style(el, 'overflow-x');
|
||||
|
||||
const scrollParent = (el) => {
|
||||
if (!inBrowser) return;
|
||||
|
Loading…
x
Reference in New Issue
Block a user