zyz
页面优化-懒加载操作
04/06
一、概述
通常在一个页面中会有很多图片,而首屏出现的图片可能就是几张。我们要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。
这也就通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载---到可视区域再加载。
二、什么是懒加载
懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。
用户滚动到它们之前,可视区域外的图像不会加载。
如下图所示,屏幕中能看到的img1
、img2
、img3
、img4
就会先加载显示。
而img5
、img6
、是在可视区域外的,就会不加载显示。只有等到用户滑动进入到可视区域时,才会被加载。
三、为什么要用懒加载
- 提升用户的体验
例如用户打开手机淘宝长页面的时候,如果页面上所有的图片都需要加载,由于图片数目较大,等待时间很长,,这就严重影响用户体验。而且更多时候其实用户都不会把整个网页都看完,所以没必要一次性将所有图片都加载完成。 - 防止网站正常使用
只可以有效防止在并发加载的资源过多会阻塞js的加载,影响网站的正常使用。
四、懒加载原理
首先将页面上的图片的src
属性设为空字符串,而图片的真实路径则设置在data-original
属性中。
当页面滚动的时候需要去监听scroll事件,在scroll事件的回调中,判断我们的懒加载的图片是否进入可视区域。
如果图片进入可视区内将图片的src
属性设置为data-original
的值,这样就可以达到延迟加载的效果。
五、图片懒加载使用
在这里已经有给我们封装好的Lazyload 图片懒加载,只需要添加对应的配置即可。
在这使用时,基本很多页面都会涉及到懒加载问题,所以可以直接将这个配置到man.js
中。
配置
Lazyload
// main.js文件中 import { Lazyload } from 'vant'; Vue.use(Lazyload);
将v-lazy指令的值设置为你需要懒加载的图片
// 例如在轮播图中,将图片属性绑定在v-lazy中即可 <van-swipe :autoplay="3000" indicator-color="white" class='banner-view'> <van-swipe-item v-for='(item,index) in banner' :key="index"> <img v-lazy='item.img'> </van-swipe-item> </van-swipe>