TypechoJoeTheme

快把钟哥带走

zyz

网站页面
标签搜索
Vue

页面优化-懒加载操作

zyz
2021-04-06
/
0 评论
/
35 阅读
/
正在检测是否收录...
04/06

一、概述

通常在一个页面中会有很多图片,而首屏出现的图片可能就是几张。我们要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽。
这也就通常所说的首屏加载,技术上现实其中要用的技术就是图片懒加载---到可视区域再加载。

二、什么是懒加载

懒加载也叫延迟加载,指的是在长网页中延迟加载图像,是一种很好优化网页性能的方式。

用户滚动到它们之前,可视区域外的图像不会加载。

如下图所示,屏幕中能看到的img1img2img3img4就会先加载显示。

img5img6、是在可视区域外的,就会不加载显示。只有等到用户滑动进入到可视区域时,才会被加载。

三、为什么要用懒加载

  • 提升用户的体验
    例如用户打开手机淘宝长页面的时候,如果页面上所有的图片都需要加载,由于图片数目较大,等待时间很长,,这就严重影响用户体验。而且更多时候其实用户都不会把整个网页都看完,所以没必要一次性将所有图片都加载完成。
  • 防止网站正常使用
    只可以有效防止在并发加载的资源过多会阻塞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> 
赞(0)
评论 (0)