mirror of
https://github.com/the1812/Bilibili-Evolved.git
synced 2025-11-04 21:22:45 +08:00
Lazy load blackboard images
This commit is contained in:
parent
742eb05d6b
commit
9bd538b438
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
2
min/blackboard.vue.min.js
vendored
2
min/blackboard.vue.min.js
vendored
@ -1 +1 @@
|
|||||||
(()=>{return(a,i)=>{const r=`<div class=blackboards><div class=header><div class=title>活动</div><a class=more><icon type=mdi icon=dots-horizontal></icon>更多</a></div><input class="hidden-input blackboard-radio"type=radio name=blackboard v-for="(b, i) of blackboards":checked="i === 0":id="'blackboard' + i":data-index=i :key=i><div class=jump-dots><label v-for="(b, i) of blackboards":for="'blackboard' + i":key=i><div class=jump-dot></div></label></div><div class=blackboard-cards><a class=blackboard-card target=_blank v-for="(b, i) of blackboards":key=i :href=b.url :title=b.title><dpi-img :src=b.imageUrl :alt=b.title :size="{width: 500, height: 250}"></dpi-img><div class=title>{{b.title}}</div></a></div></div>`;i.applyStyleFromText(`.simple-home .blackboards{display:grid;grid-template-areas:"header header" "dots cards";grid-template-columns:8px 1fr;grid-template-rows:1fr 250px;row-gap:16px;column-gap:16px;align-self:start;justify-self:center}.simple-home .blackboards .blackboard-cards{grid-area:cards;--blackboard-width:500px;--blackboard-height:250px;width:var(--blackboard-width);height:var(--blackboard-height);border-radius:16px;overflow:hidden}.simple-home .blackboards .blackboard-cards .blackboard-card{width:100%;height:100%;position:relative;display:block;transition:.3s cubic-bezier(.65,.05,.36,1)}.simple-home .blackboards .blackboard-cards .blackboard-card img{width:100%;height:100%;object-fit:fill;display:block}.simple-home .blackboards .blackboard-cards .blackboard-card .title{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 16px;color:#fff;background-color:#000a;font-size:14px;font-weight:700;border-radius:14px;white-space:nowrap}`,"blackboard-style");return{export:Object.assign({template:r},{components:{Icon:()=>i.importAsync("icon.vue"),"dpi-img":()=>i.importAsync("dpi-img.vue")},data(){return{blackboards:[],interval:0}},destroyed(){if(this.interval){clearInterval(this.interval)}},async mounted(){const{getBlackboards:a}=await i.importAsync("blackboard");this.blackboards=(await a()).filter(a=>!a.isAd);const r=dq(".blackboards");this.interval=setInterval(()=>{if(!document.hasFocus()||r.matches(".blackboards:hover")){return}const a=parseInt(dq(`.blackboard-radio:checked`).getAttribute("data-index"));let i;if(a===this.blackboards.length-1){i=0}else{i=a+1}dq(`.blackboard-radio[data-index='${i}']`).checked=true},5e3)}})}}})();
|
(()=>{return(a,r)=>{const i=`<div class=blackboards><div class=header><div class=title>活动</div><a class=more><icon type=mdi icon=dots-horizontal></icon>更多</a></div><input class="hidden-input blackboard-radio"type=radio name=blackboard v-for="(b, i) of blackboards":checked="i === 0":id="'blackboard' + i":data-index=i :key=i><div class=jump-dots><label v-for="(b, i) of blackboards":for="'blackboard' + i":key=i><div class=jump-dot></div></label></div><div class=blackboard-cards><a class=blackboard-card target=_blank v-for="(b, i) of blackboards":key=i :href=b.url :title=b.title><dpi-img :src=b.imageUrl :alt=b.title :size="{width: 500, height: 250}":root=cardsContainer></dpi-img><div class=title>{{b.title}}</div></a></div></div>`;r.applyStyleFromText(`.simple-home .blackboards{display:grid;grid-template-areas:"header header" "dots cards";grid-template-columns:8px 1fr;grid-template-rows:1fr 250px;row-gap:16px;column-gap:16px;align-self:start;justify-self:center}.simple-home .blackboards .blackboard-cards{grid-area:cards;--blackboard-width:500px;--blackboard-height:250px;width:var(--blackboard-width);height:var(--blackboard-height);border-radius:16px;overflow:hidden}.simple-home .blackboards .blackboard-cards .blackboard-card{width:100%;height:100%;position:relative;display:block;transition:.3s cubic-bezier(.65,.05,.36,1)}.simple-home .blackboards .blackboard-cards .blackboard-card img{width:100%;height:100%;object-fit:fill;display:block}.simple-home .blackboards .blackboard-cards .blackboard-card .title{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);padding:4px 16px;color:#fff;background-color:#000a;font-size:14px;font-weight:700;border-radius:14px;white-space:nowrap}`,"blackboard-style");return{export:Object.assign({template:i},{components:{Icon:()=>r.importAsync("icon.vue"),"dpi-img":()=>r.importAsync("dpi-img.vue")},data(){return{blackboards:[],interval:0}},destroyed(){if(this.interval){clearInterval(this.interval)}},computed:{cardsContainer(){return this.$el.querySelector(".blackboard-cards")}},async mounted(){const{getBlackboards:a}=await r.importAsync("blackboard");this.blackboards=(await a()).filter(a=>!a.isAd);const i=dq(".blackboards");this.interval=setInterval(()=>{if(!document.hasFocus()||i.matches(".blackboards:hover")){return}const a=parseInt(dq(`.blackboard-radio:checked`).getAttribute("data-index"));let r;if(a===this.blackboards.length-1){r=0}else{r=a+1}dq(`.blackboard-radio[data-index='${r}']`).checked=true},5e3)}})}}})();
|
||||||
@ -13,7 +13,7 @@
|
|||||||
"batch-download.min.js": "A0F979F33A06E23D3800525CF70700170565EBD98579CE394ECE4CC66AAEEB5A",
|
"batch-download.min.js": "A0F979F33A06E23D3800525CF70700170565EBD98579CE394ECE4CC66AAEEB5A",
|
||||||
"biliplus-redirect.min.js": "9882D14DAC5C103212A101A5168883C41B4B3B2737FD5F222DC343D0304FF8AF",
|
"biliplus-redirect.min.js": "9882D14DAC5C103212A101A5168883C41B4B3B2737FD5F222DC343D0304FF8AF",
|
||||||
"blackboard.min.js": "83988755E158B557CB1AA80B526AE969CFB82AA00ACCB03F3A4B333DBD37B24B",
|
"blackboard.min.js": "83988755E158B557CB1AA80B526AE969CFB82AA00ACCB03F3A4B333DBD37B24B",
|
||||||
"blackboard.vue.min.js": "1F0AE6D7666BED6E7D61A0F647D9CE8D847DF4A1E246A87B2DAD6834B5ACACD7",
|
"blackboard.vue.min.js": "64E91D9435ED0FB1064B7DDA4F00FC2C6F5BCFB0C25276E824C8D3C65E37894F",
|
||||||
"blur-video-control.min.css": "B72FA7AD198ED1C9A9620A83881441F96F9FF3083ED12203A324B9753A7CCFFD",
|
"blur-video-control.min.css": "B72FA7AD198ED1C9A9620A83881441F96F9FF3083ED12203A324B9753A7CCFFD",
|
||||||
"blur-video-control.min.js": "00A2AC837FC455DF2AED7D0C350265C7438CC6F5C203F085E19639DDB86D0E11",
|
"blur-video-control.min.js": "00A2AC837FC455DF2AED7D0C350265C7438CC6F5C203F085E19639DDB86D0E11",
|
||||||
"clear-cache.min.js": "44EA6B2597B887B6FAC42A82E1CCE39A64494ABFC813AC984A90476ED10BA714",
|
"clear-cache.min.js": "44EA6B2597B887B6FAC42A82E1CCE39A64494ABFC813AC984A90476ED10BA714",
|
||||||
@ -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": "4C6526A23D9D19C2731722313FB933336D888A9CF2C08259B051DA0CD03A7975",
|
"dpi-img.vue.min.js": "3D9D93079365DCABA8DC8970F051AD1A7F25C3EFFF850CD1000C4312E9B910DD",
|
||||||
"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",
|
||||||
|
|||||||
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,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}}})}}})();
|
(()=>{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};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}}})}}})();
|
||||||
@ -27,7 +27,6 @@ export default {
|
|||||||
rootMargin: this.rootMargin || '200px',
|
rootMargin: this.rootMargin || '200px',
|
||||||
threshold: this.threshold,
|
threshold: this.threshold,
|
||||||
}
|
}
|
||||||
console.log(options)
|
|
||||||
const observer = new IntersectionObserver(entries => {
|
const observer = new IntersectionObserver(entries => {
|
||||||
entries.forEach(entry => {
|
entries.forEach(entry => {
|
||||||
if (entry.isIntersecting) {
|
if (entry.isIntersecting) {
|
||||||
|
|||||||
@ -30,7 +30,7 @@
|
|||||||
:href="b.url"
|
:href="b.url"
|
||||||
:title="b.title"
|
:title="b.title"
|
||||||
>
|
>
|
||||||
<dpi-img :src="b.imageUrl" :alt="b.title" :size="{width: 500, height: 250}"></dpi-img>
|
<dpi-img :src="b.imageUrl" :alt="b.title" :size="{width: 500, height: 250}" :root="cardsContainer"></dpi-img>
|
||||||
<div class="title">{{b.title}}</div>
|
<div class="title">{{b.title}}</div>
|
||||||
</a>
|
</a>
|
||||||
</div>
|
</div>
|
||||||
@ -55,6 +55,11 @@ export default {
|
|||||||
clearInterval(this.interval)
|
clearInterval(this.interval)
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
|
computed: {
|
||||||
|
cardsContainer() {
|
||||||
|
return this.$el.querySelector('.blackboard-cards')
|
||||||
|
}
|
||||||
|
},
|
||||||
async mounted() {
|
async mounted() {
|
||||||
const { getBlackboards } = await import('./blackboard')
|
const { getBlackboards } = await import('./blackboard')
|
||||||
this.blackboards = (await getBlackboards()).filter(it => !it.isAd)
|
this.blackboards = (await getBlackboards()).filter(it => !it.isAd)
|
||||||
|
|||||||
Loading…
Reference in New Issue
Block a user