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 { 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;
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
};
|
|
||||||
|
@ -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;
|
|
||||||
}
|
|
||||||
);
|
|
||||||
},
|
|
||||||
},
|
},
|
||||||
};
|
},
|
||||||
};
|
});
|
||||||
|
@ -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;
|
||||||
|
Loading…
x
Reference in New Issue
Block a user