1.首先 需要 引入第三的插件库
npm install vue-lazyload --save-dev
2.在入口文件
import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad)
// 如果不设置 loading 那么预加载的时候显示的图片就是它本身data-src 路径下的图片,所以在这我就没设置其它的实属性了
3.组件内对背景图片实现懒加载
* 效果图如下 ![在这里插入图片描述](https://img-blog.csdnimg.cn/20191226112748454.png) 4.组件内 对img 使用懒加载时,左侧的图片出现了问题 (不显示)
<img v-lazy="'/static/images/toLeft.png'" @click="goPage('operatLeaderLeft')" class="imgLeft">
<img v-lazy="'/static/images/toRight.png'" @click="goPage('operatLeaderRight')" class="imgRight">
<img v-lazy="'/static/images/back.png'" @click="goPage('operatHome')" class="imgBack" >
// 对应的 样式
.bgColor .imgLeft{
cursor:pointer;
transform:scale(0.4);
position: absolute;
left: -2.5%;
top: 40%;
overflow: hidden;
}
.bgColor .imgRight{
cursor:pointer;
transform:scale(0.4);
position: absolute;
right: -2.5%;
top: 40%;
overflow: hidden;
}
.bgColor .imgBack{
cursor:pointer;
transform:scale(0.4);
position: absolute;
right: -2.5%;
bottom: 3%;
overflow: hidden;
}
*效果图是
- 打开浏览器控制台后
很明显 图片是存在的,只是一直在预加载状态,所以加载不出来
5.解决 - 你我尝试着 把 左边的样式修改
.bgColor .imgLeft{
cursor:pointer;
transform:scale(0.4);
position: absolute;
left: 0%;
top: 40%;
overflow: hidden;
}
效果如下
图片出来了,但是明显不是我想要的位置,
// 显示在上图位置
left: 0%;
// 下面会显示和右边图标的位置
left:-2.5%
// 问题来了 ,可能是位置导致加载不来,但是为什么同样的代码右侧的却能一直出来
right: -2.5% 效果如上图
- 这是我还没想到为什么会这样,但是我需要的效果解决了 最后
.bgColor .imgLeft{
cursor:pointer;
transform:scale(0.4);
position: absolute;
right: 92.5%;
top: 40%;
overflow: hidden;
}
效果图
6.小结
- 如果有人知道为啥会这样请 指教(虽然解决了问题,但还是懵懵的)
- 如果你和我一样实现懒加载图片时一直是预加载状态,也就是下图这个状态
可以试一试 调整样式,比如
left:5% 改成 right:95%
- 当时页尝试过在 main.js 对挂载到vue上的lazyed 加loading 配置,图片也是出来,但是问题就是,会造成所有的懒加载的图片 预加载的图片都是一个图片,明显不是我想要的效果,我想要的是(预加载时的图片就是他本身)
- 也在其它帖子中,看到要设置 key ,然而并没有什么用
- 还有 用V-lazy 给img 加懒加载 或者时背景图片加懒加载时,如果图片资源时在src 底下的assets文件加下,需要在 引用图片的页面在 用require 导入,不然直接在 v-lazy 后面写图片路径,是会报错的,如何引用如下
data(){
return{
imgUrl: require('/assets/xxx.png')
}
}
<img v-lazy="imgUrl" @click="goPage('operatLeaderRight')" class="imgRight">
如果是在和src 平级的static文件夹下,可以直接写图片路径,如下
<img v-lazy="'/static/images/toRight.png'" @click="goPage('operatLeaderRight')" class="imgRight">