图片懒加载的实现及其原理

图片懒加载的实现

• 通过element-ui 中<el-image v-for="url in urls" :key="url" :src="url" lazy></el-iamge>，
• 通过使用vue-lazyLoad插件实现，页面中通过v-lazy使用

//main.ts
import VueLazyload from 'vue-lazyload'
app.use(VueLazyload,
    {preLoad: 1.3, //预加载的宽高比loading: 
    loadimage:"./assets/vue.svg", //图片加载状态下显示的图片
    // error: "", //图片加载失败时显示的图片
    attempt: 1, // 加载错误后最大尝试次数
})

• 判断图像的offsetTop（距离顶部的高度）-scrollTop(页面被卷去的高度)<=window.innerHeight（可视区高度）才加载