在npm中下载图片懒加载模块
npm i vue-lazyload -s
下载完成以后通过vue中的main.js进行引入然后进行配置
// 引入vue-lazyload
import VueLazyload from "vue-lazyload";
// 使用vue-lazyload
Vue.use(VueLazyload, {
// 配制加载状态显示的图片
loading: require("./assets/lazyload/loading.gif"),
// 配制加载出错显示的图片
error: require("./assets/lazyload/error.jpg"),
// loading: 'lazyload/loading.gif',
// error: 'lazyload/error.jpg',
});
引入模块成功以后,项目中的图片就将以懒加载的方式呈现,这样减少了服务器的压力
假如我在这里通过懒加载的方式加载10张图片
它在页面的加载情况会如下显示,鼠标滚动才会向服务器再次发送请求,获取数据
如果在项目中不使用懒加载,就会增加服务器的压力,请求就会如下图一样,一次性请求所有的数据,所以开发中图片懒加载还是不能忽视的