1.作用

　　在图片较多的页面中，页面加载性能较差。使用图片懒加载可以让图片出现在可视区域时再进行加载，从而提高用户体验。

2.原理

　　设置img标签的src属性为空或统一的图片路径（如加载中样式），监听页面的滚动，当图片出现在可视区域时再为src重新赋值。

3.实现

　　在vue项目中，可以使用vue的vue-lazyload插件。

  • 安装插件：npm install vue-lazyload --save-dev
  • 引入插件：import VueLazyload from 'vue-lazyload'
  • 使用插件：Vue.use(VueLazyload)
  • 修改图片显示方式：<img v-lazy="/public/images/a.jpg/">
  • 插件的配置项：

【vue】---- 图片懒加载的更多相关文章

  1. Vue图片懒加载插件

    图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...

  2. vue 图片懒加载 vue-lazyload

    图片懒加载 在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽. ...

  3. Vue图片懒加载

    图片懒加载的原理 先将img标签中的src链接设为同一张图片(空白图片),将其真正的图片地址存储再img标签的自定义属性中(比如data-src).当js监听到该图片元素进入可视窗口时,即将自定义属性 ...

  4. Vue图片懒加载之lazyload插件使用

    当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...

  5. VUE图片懒加载-vue lazyload插件的简单上手使用（优化版本）

    在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...

  6. vue-lazyload 的使用（vue图片懒加载）

    github地址:https://github.com/hilongjw/vue-lazyload npm i vue-lazyload -S 或者 <script src="http ...

  7. VUE图片懒加载-vue lazyload插件的简单使用

    序:vue项目时候,我们要对图片进行懒加载处理,这个开发项目中就不需要自己去写了,因为比较方便使用vue lazyload进行处理,高效率开发 一. vue lazyload插件: 插件地址:http ...

  8. vue 图片懒加载v-lazy

    搬运自:https://blog.csdn.net/twodogya/article/details/80223331 vue v-lazy官方API:https://www.npmjs.com/pa ...

  9. Vue图片懒加载插件 - vue lazyload的简单使用

    Vue module for lazyloading images in your applications. Some of goals of this project worth noting i ...

  10. Vue 自定义图片懒加载指令v-lazyload

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...

随机推荐

  1. springboot整合mybatis报错：Invalid default: public abstract java.lang.Class org.mybatis.spring.annotation...

    <dependency> <groupId>org.mybatis.spring.boot</groupId> <artifactId>mybatis- ...

  2. HUPO|PSI|PeptideAtlas|TPP|Partial submission|Complete submission|proteomeXchange

    蛋白质组实验数据提交 需要共享数据,共享要求: 质谱实验数据 HUPO Proteomics Standards Initiative (http://www.psidev.info/overview ...

  3. Angular开发者指南（五）服务

    服务 AngularJS服务是使用依赖注入(DI)连接在一起的可替代对象. 可以使用服务在整个应用程式中整理和分享程式码. AngularJS服务有: 延迟初始化 - AngularJS只在应用程序组 ...

  4. JDBC源码分析（加载过程）

    public static void main(String[] args) {     String url = "jdbc:mysql://172.16.27.11:3306/jdbcT ...

  5. [LC] 236. Lowest Common Ancestor of a Binary Tree

    Given a binary tree, find the lowest common ancestor (LCA) of two given nodes in the tree. According ...

  6. centos7 开机/etc/rc.local 不执行的问题(转载)

    最近发现centos7 的/etc/rc.local不会开机执行,于是认真看了下/etc/rc.local文件内容的就发现了问题的原因了 #!/bin/bash # THIS FILE IS ADDE ...

  7. 秒搭Kubernetes之使用Rancher

    Rancher 在接触Docker和K8s的前阶段就耳闻目睹到Rancher,但是没有进一步接触过.直到将K8s搭建完成.才进一步了学习与实践Rancher. Rancher是简便易用的容器管理.其中 ...

  8. （一）mybatis简易搭建

    mybatis(基础及其搭建) 声明:该文章及该分类中的内容均基于正在开发的项目和一本参考书(深入浅出MyBatis技术原理与实战    by 杨开振) 一.mybatis核心组件(简要介绍) Sql ...

  9. 实现 add()(1,2)(3,4)(7,8,9)()

    function add(){ var sum=0; function inner(pre,cur){ return pre+cur; } sum=Array.prototype.slice.call ...

  10. nginx在反向代理侧实现ssl

    被代理的webserver为lnmp项目,现在需要在反向代理侧使用nginx实现ssl的反向代理(域名解析在反代的ip上),配置如下: upstream XXX { server 192.168.0. ...