标签：包含 lock 并且 通过 集合 dex file ntb query
1.图片滚动到可视窗口区域后再进行加载
index.html
<img :data-src="subItem.thumbUrl" />
index.js
// imgonload这个方法在滚动监听中使用（可添加防抖），
imgonload = () => {
const img = document.querySelectorAll(‘img‘)
for (let i = 0; i < img.length; i++) {
if (img[i].getBoundingClientRect().top < window.innerHeight && !img[i].src) {
// 图片一旦有src就会加载出来，所以图片的路径不会放在src中，而是一个自定义的属性data-src中
img[i].src = img[i].dataset.src
}
}
}
getBoundingClientRect用于获取某个元素相对于视窗的位置集合。返回的结果是包含完整元素的最小矩形，并且拥有
left,top,right,bottom,x,y,width, 和height这几个以像素为单位的只读属性用于描述整个边框。除了width和height以外的属性是相对于视图窗口的左上角来计算的。
当计算边界矩形时，会考虑视口区域（或其他可滚动元素）内的滚动操作，也就是说，当滚动位置发生了改变，top和left属性值就会随之立即发生变化（因此，它们的值是相对于视口的，而不是绝对的）。如果你需要获得相对于整个网页左上角定位的属性值，那么只要给top、left属性值加上当前的滚动位置（通过 window.scrollX 和 window.scrollY），这样就可以
2.先加载一个缩略图，清晰图加载完毕后再进行替换
index.html
// thumbUrl是指缩略图的链接 <img id="load" :src="thumbUrl">
index.js
// thumbOriginal在获取到图片清晰图的链接后开始执行
// calback可以不加 thumbOriginal = (originalUrl, callback) => { const load = document.getElementById(‘load‘) if (load && originalUrl) { const img = new Image()// 新建一个图片对象 img.src = originalUrl // 最终显示的大图 img.onload = () => { load.src = img.src callback&&callback() } } }
标签：包含 lock 并且 通过 集合 dex file ntb query
原文地址：https://www.cnblogs.com/wangxirui/p/13398042.html
