Add lazy loading for dpi-img

This commit is contained in:
the1812 2019-10-26 11:01:14 +08:00
parent 442b09eecb
commit 71a5ca703b
8 changed files with 40 additions and 13 deletions

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

View File

@ -47,7 +47,7 @@
"download-video.min.css": "1183440AB062DD7C26E68440F4FE4187395E9CFBA671497C362282F0CFC6090A", "download-video.min.css": "1183440AB062DD7C26E68440F4FE4187395E9CFBA671497C362282F0CFC6090A",
"download-video.min.html": "4311ABAF2886EB02B1003EA864DD605B113CDB05FF04C3A6882AD931F320D216", "download-video.min.html": "4311ABAF2886EB02B1003EA864DD605B113CDB05FF04C3A6882AD931F320D216",
"download-video.min.js": "3413706B68FF52C6BC592187D39BFC1046178AE62D56D41E533D30A4780BC49F", "download-video.min.js": "3413706B68FF52C6BC592187D39BFC1046178AE62D56D41E533D30A4780BC49F",
"dpi-img.vue.min.js": "D4833A242EBDD84834B11DB4CEB68B8807BDFC9693C3E1AAE73071986FE26F78", "dpi-img.vue.min.js": "4C6526A23D9D19C2731722313FB933336D888A9CF2C08259B051DA0CD03A7975",
"expand-danmaku.min.js": "B21658C40085AEA8DC49652AE62EB8610BB2EBEAF7A9C9AF69EF3B11E08EEC8D", "expand-danmaku.min.js": "B21658C40085AEA8DC49652AE62EB8610BB2EBEAF7A9C9AF69EF3B11E08EEC8D",
"expand-description.min.css": "58C7710A50521B80F7D872BDC4C652610D84C4FABC6874BA66DA37B4F8759224", "expand-description.min.css": "58C7710A50521B80F7D872BDC4C652610D84C4FABC6874BA66DA37B4F8759224",
"expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7", "expand-description.min.js": "A56857AD6B1C9F431B233D188E857D30DD5A2EB644986DE32A21280B1B7BC7A7",

Binary file not shown.

View File

@ -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}}})}}})();

View File

@ -1,17 +1,44 @@
<template> <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> </template>
<script> <script>
export default { export default {
props: ['size', 'src', 'blur'], props: ['size', 'src', 'blur', 'root', 'rootMargin', 'threshold'],
computed: { data() {
srcset () { return {
srcset: null,
actualSrc: null,
}
},
methods: {
calcSrc() {
if (!this.src || !this.size) { if (!this.src || !this.size) {
return null 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 () { width () {
if (typeof this.size === 'object' && 'width' in this.size) { if (typeof this.size === 'object' && 'width' in this.size) {
return this.size.width return this.size.width