Skip to content

N
NodeJS_671036

Five-菜鸟级 / NodeJS_671036
与 Fork 源项目一致

Fork自 inscode / NodeJS

通知 2
Star 0
Fork 0
N
NodeJS_671036
提交 5e9782e7 编写于 作者: Q qq_41923622
浏览文件
操作

Mon Mar 24 17:02:00 CST 2025 inscode

上级 423aae85
隐藏空白更改
内联 并排
Showing with 64 addition and 61 deletion
index.html
浏览文件 @ 5e9782e7
...@@ -45,7 +45,7 @@ ...@@ -45,7 +45,7 @@
<div class="section-wrapper"> <div class="section-wrapper">
💓 💖 💓 💖
</div> </div>
<div v-scope="ImgBox({imgName:'DSCF8222.jpg'})"></div> <div v-scope="ImgBox({imgName:'DSCF8222.jpg'})" @vue:mounted="mounted"></div>
</section> </section>
<section class="section-row"> <section class="section-row">
<div class="section-wrapper"> <div class="section-wrapper">
......
src/section/components/imgbox/index.ts
浏览文件 @ 5e9782e7
...@@ -36,72 +36,75 @@ let imgNameMap = { ...@@ -36,72 +36,75 @@ let imgNameMap = {
"DSCF8365.jpg": "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250324100709204-1857305680.jpg" "DSCF8365.jpg": "https://vercel-proxy.fivecc.cn/static-img/1775464/202503/1775464-20250324100709204-1857305680.jpg"
} }
let imgNameW320Map = { let imgNameW320Map = {
"DSCF7995.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF7995.jpg!w320", "DSCF7995.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF7995.jpg!w320?2025-02-25 18:53:14",
"DSCF8019.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8019.jpg!w320", "DSCF8019.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8019.jpg!w320?2025-02-25 18:53:15",
"DSCF8027.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8027.jpg!w320", "DSCF8027.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8027.jpg!w320?2025-02-25 18:53:10",
"DSCF8032.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8032.jpg!w320", "DSCF8032.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8032.jpg!w320?2025-02-25 18:53:12",
"DSCF8060.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8060.jpg!w320", "DSCF8060.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8060.jpg!w320?2025-02-25 18:53:10",
"DSCF8066.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8066.jpg!w320", "DSCF8066.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8066.jpg!w320?2025-02-25 18:53:08",
"DSCF8082.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8082.jpg!w320", "DSCF8082.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8082.jpg!w320?2025-02-25 18:53:06",
"DSCF8162.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8162.jpg!w320", "DSCF8162.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8162.jpg!w320?2025-02-25 18:53:08",
"DSCF8222.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8222.jpg!w320", "DSCF8222.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8222.jpg!w320?2025-02-25 18:53:04",
"DSCF8233.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8233.jpg!w320", "DSCF8233.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8233.jpg!w320?2025-02-25 18:52:59",
"DSCF8242.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8242.jpg!w320", "DSCF8242.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8242.jpg!w320?2025-02-25 18:52:38",
"DSCF8277.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8277.jpg!w320", "DSCF8277.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8277.jpg!w320?2025-02-25 18:52:50",
"DSCF8300.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8300.jpg!w320", "DSCF8300.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8300.jpg!w320?2025-02-25 18:53:01",
"DSCF8317.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8317.jpg!w320", "DSCF8317.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8317.jpg!w320?2025-02-25 18:52:37",
"DSCF8340.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8340.jpg!w320", "DSCF8340.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8340.jpg!w320?2025-02-25 18:52:17",
"DSCF8365.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8365.jpg!w320", "DSCF8365.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8365.jpg!w320?2025-02-25 18:52:27",
"DSCF8367.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8367.jpg!w320", "DSCF8367.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8367.jpg!w320?2025-02-25 18:52:07",
"DSCF8380.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8380.jpg!w320", "DSCF8380.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8380.jpg!w320?2025-02-25 18:52:53",
"DSCF8387.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8387.jpg!w320", "DSCF8387.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8387.jpg!w320?2025-02-25 18:52:02",
"DSCF8421.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/DSCF8421.jpg!w320", "DSCF8421.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/DSCF8421.jpg!w320?2025-02-25 18:51:52",
"TY990002.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990002.jpg!w320", "TY990002.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990002.jpg!w320?2025-02-25 18:51:40",
"TY990003.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990003.jpg!w320", "TY990003.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990003.jpg!w320?2025-02-25 18:51:38",
"TY990008.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990008.jpg!w320", "TY990008.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990008.jpg!w320?2025-02-25 18:51:33",
"TY990010.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990010.jpg!w320", "TY990010.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990010.jpg!w320?2025-02-25 18:51:18",
"TY990014.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990014.jpg!w320", "TY990014.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990014.jpg!w320?2025-02-25 18:51:23",
"TY990015.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990015.jpg!w320", "TY990015.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990015.jpg!w320?2025-02-25 18:51:17",
"TY990021.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990021.jpg!w320", "TY990021.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990021.jpg!w320?2025-02-25 18:51:14",
"TY990027.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990027.jpg!w320", "TY990027.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990027.jpg!w320?2025-02-25 18:51:06",
"TY990041.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990041.jpg!w320", "TY990041.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990041.jpg!w320?2025-02-25 18:51:13",
"TY990048.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990048.jpg!w320", "TY990048.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990048.jpg!w320?2025-02-25 18:51:07",
"TY990056.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990056.jpg!w320", "TY990056.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990056.jpg!w320?2025-02-25 18:51:02",
"TY990060.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990060.jpg!w320", "TY990060.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990060.jpg!w320?2025-02-25 18:51:01",
"TY990061.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990061.jpg!w320", "TY990061.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990061.jpg!w320?2025-02-25 18:50:56",
"TY990064.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990064.jpg!w320", "TY990064.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990064.jpg!w320?2025-02-25 18:50:53",
"TY990066.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990066.jpg!w320", "TY990066.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990066.jpg!w320?2025-02-25 18:50:58",
"TY990070.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1097059/TY990070.jpg!w320" "TY990070.jpg": "https://erp-new.cdn.yingtaoyun.com/flw/1784/Q2406170015/jx/1241858/TY990070.jpg!w320?2025-02-25 18:50:56"
} }
const observer = new IntersectionObserver((entries, observer) => { const observer = new IntersectionObserver((entries, observer) => {
entries.forEach(entry => { entries.forEach(entry => {
if (entry.isIntersecting) { if (entry.isIntersecting) {
const img = entry.target; const img = entry.target;
const realSrc = img.dataset.src; const realSrc = img.dataset.src;
const imgObj = new Image(); const imgObj = new Image();
imgObj.src = realSrc; imgObj.src = realSrc;
imgObj.onload = () => { imgObj.onload = () => {
img.src = realSrc; img.src = realSrc;
observer.unobserve(img); observer.unobserve(img);
}; };
} }
}); });
}); });
export function ImgBox(props: any = {}) {
export function ImgBox(props:any={}){
console.log("yyy",this,this.$refs.imgboxRef)
let imgSrc = imgNameW320Map[props.imgName] let imgSrc = imgNameW320Map[props.imgName]
let dataSrc = imgNameMap[props.imgName] let dataSrc = imgNameMap[props.imgName]
let imgObj = this.$refs.imgboxRef;
setTimeout(()=>{
console.log("yyy",this,this.$refs.imgboxRef)
},2000)
if(imgSrc&&dataSrc&&imgObj){
observer.observe(imgObj)
}
return { return {
$template:'#imgbox-template', $template: '#imgbox-template',
imgSrc: imgSrc, imgSrc: imgSrc,
imgboxRef: null,
dataSrc: dataSrc, dataSrc: dataSrc,
mounted() {
let imgObj = this.$refs.imgboxRef
if (imgSrc && dataSrc && imgObj) {
observer.observe(imgObj)
}
}
} }
} }
\ No newline at end of file
Markdown is supported
0% 或 .
You are about to add 0 people to the discussion. Proceed with caution.
先完成此消息的编辑！
想要评论请 注册 或