mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Add lazy loading for dpi-img
This commit is contained in:
parent
442b09eecb
commit
71a5ca703b
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -47,7 +47,7 @@
|
||||
"download-video.min.css": "1183440AB062DD7C26E68440F4FE4187395E9CFBA671497C362282F0CFC6090A",
|
||||
"download-video.min.html": "4311ABAF2886EB02B1003EA864DD605B113CDB05FF04C3A6882AD931F320D216",
|
||||
"download-video.min.js": "3413706B68FF52C6BC592187D39BFC1046178AE62D56D41E533D30A4780BC49F",
|
||||
"dpi-img.vue.min.js": "D4833A242EBDD84834B11DB4CEB68B8807BDFC9693C3E1AAE73071986FE26F78",
|
||||
"dpi-img.vue.min.js": "4C6526A23D9D19C2731722313FB933336D888A9CF2C08259B051DA0CD03A7975",
|
||||
"expand-danmaku.min.js": "B21658C40085AEA8DC49652AE62EB8610BB2EBEAF7A9C9AF69EF3B11E08EEC8D",
|
||||
"expand-description.min.css": "58C7710A50521B80F7D872BDC4C652610D84C4FABC6874BA66DA37B4F8759224",
|
||||
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",
|
||||
|
||||
BIN
min/bundle.zip
BIN
min/bundle.zip
Binary file not shown.
2
min/dpi-img.vue.min.js
vendored
2
min/dpi-img.vue.min.js
vendored
@ -1 +1 @@
|
||||
(()=>{return(t,e)=>{const i=`<img :width=width :height=height :srcset=srcset :src=src :style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}">`;return{export:Object.assign({template:i},{props:["size","src","blur"],computed:{srcset(){if(!this.src||!this.size){return null}return getDpiSourceSet(this.src,this.size)},width(){if(typeof this.size==="object"&&"width"in this.size){return this.size.width}return null},height(){if(typeof this.size==="object"&&"height"in this.size){return this.size.height}return null}}})}}})();
|
||||
(()=>{return(t,s)=>{const e=`<img :width=width :height=height :srcset=srcset :src=actualSrc :style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}">`;return{export:Object.assign({template:e},{props:["size","src","blur","root","rootMargin","threshold"],data(){return{srcset:null,actualSrc:null}},methods:{calcSrc(){if(!this.src||!this.size){return null}const t=this.src.substring(this.src.lastIndexOf(".")+1);this.srcset=getDpiSourceSet(this.src,this.size,t);this.actualSrc=this.src}},mounted(){const t={root:this.root,rootMargin:this.rootMargin||"200px",threshold:this.threshold};console.log(t);const s=new IntersectionObserver(t=>{t.forEach(t=>{if(t.isIntersecting){this.calcSrc();s.disconnect()}})},t);s.observe(this.$el)},computed:{width(){if(typeof this.size==="object"&&"width"in this.size){return this.size.width}return null},height(){if(typeof this.size==="object"&&"height"in this.size){return this.size.height}return null}}})}}})();
|
||||
@ -1,17 +1,44 @@
|
||||
<template>
|
||||
<img :width="width" :height="height" :srcset="srcset" :src="src" :style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}">
|
||||
<img :width="width" :height="height" :srcset="srcset" :src="actualSrc" :style="{filter: blur ? 'blur(' + blur + 'px)' : undefined}">
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: ['size', 'src', 'blur'],
|
||||
computed: {
|
||||
srcset () {
|
||||
props: ['size', 'src', 'blur', 'root', 'rootMargin', 'threshold'],
|
||||
data() {
|
||||
return {
|
||||
srcset: null,
|
||||
actualSrc: null,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
calcSrc() {
|
||||
if (!this.src || !this.size) {
|
||||
return null
|
||||
}
|
||||
return getDpiSourceSet(this.src, this.size)
|
||||
const extension = this.src.substring(this.src.lastIndexOf('.') + 1)
|
||||
this.srcset = getDpiSourceSet(this.src, this.size, extension)
|
||||
this.actualSrc = this.src
|
||||
},
|
||||
},
|
||||
mounted() {
|
||||
const options = {
|
||||
root: this.root,
|
||||
rootMargin: this.rootMargin || '200px',
|
||||
threshold: this.threshold,
|
||||
}
|
||||
console.log(options)
|
||||
const observer = new IntersectionObserver(entries => {
|
||||
entries.forEach(entry => {
|
||||
if (entry.isIntersecting) {
|
||||
this.calcSrc()
|
||||
observer.disconnect()
|
||||
}
|
||||
})
|
||||
}, options)
|
||||
observer.observe(this.$el)
|
||||
},
|
||||
computed: {
|
||||
width () {
|
||||
if (typeof this.size === 'object' && 'width' in this.size) {
|
||||
return this.size.width
|
||||
|
||||
Loading…
Reference in New Issue
Block a user