对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面内未出现在可视区域内的图片先不做加载, 等到滚动到可视区域后再去加载。这样子对于页面加载性能上会有很大的提升,也提高了用户体验。

实现方法(使用vue的vue-lazyload插件)

1.安装插件

npm install vue-lazyload --save-dev

2.在入口文件main.js中引入并使用

import VueLazyload from 'vue-lazyload'

直接使用

Vue.use(VueLazyload)

或者添加自定义选项

Vue.use(VueLazyload, {
preLoad: 1.3,
error: 'dist/error.png',
loading: 'dist/loading.gif',
attempt:
})

3.修改图片显示方式为懒加载(将 :src 属性直接改为v-lazy)

<a href="javascript:;"><img v-lazy="'/static/img/' + item.productImage"></a>

参数选项说明

图片懒加载的简单效果已经实现了,然后就可以按这开发文档的api进行扩展了:

key description default options
preLoad proportion of pre-loading height(预加载高度比例) 1.3 Number
error src of the image upon load fail(图片路径错误时加载图片) 'data-src' String
loading src of the image while loading(预加载图片) 'data-src' String
attempt attempts count(尝试加载图片数量) 3 Number
listenEvents

events that you want vue listen for

(想要监听的vue事件)

默认['scroll']可以省略,

当插件跟页面中的动画或过渡等事件有冲突是,

可以尝试其他选项

['scroll'(默认),

'wheel',

'mousewheel',

'resize',

'animationend',

'transitionend',

'touchmove']

Desired Listen Events
adapter

dynamically modify the attribute of element

(动态修改元素属性)

{ } Element Adapter
filter the image's listener filter(动态修改图片地址路径) { } Image listener filter
lazyComponent lazyload component false Lazy Component
dispatchEvent trigger the dom event false Boolean
throttleWait throttle wait 200 Number
observer use IntersectionObserver false Boolean
observerOptions IntersectionObserver options { rootMargin: '0px', threshold: 0.1 } IntersectionObserver

 

至此,一个简单的图片懒加载就完成啦......

vue项目中实现图片懒加载的方法的更多相关文章

  1. Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教! ---对于图片过多的页面,为了加速页面加载速度,所以很多时候我们需要将页面 ...

  2. vue项目中主要文件的加载顺序(index.html、App.vue、main.js)

    先后顺序: index.html > App.vue的export外的js代码 > main.js > App.vue的export里面的js代码 > Index.vue的ex ...

  3. js实现一个长页面中的图片懒加载即滚动到其位置才加载

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  4. vue项目优化之路由懒加载

    const login = () =>import('@/views/login'); export default new Router({ routes:[ { path:'/login', ...

  5. vue项目中主要文件的加载顺序(index.html、main.js、App.vue)

    todo: https://www.cnblogs.com/xifengxiaoma/p/9493544.html https://www.cnblogs.com/stella1024/p/10563 ...

  6. 前端性能优化成神之路--图片懒加载(lazyload image)

    图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...

  7. Vue图片懒加载插件

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

  8. 前端实现图片懒加载(lazyload)的两种方式

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

  9. 基于javascript实现图片懒加载(亲测有效)

    这篇文章主要介绍了javascript实现图片懒加载的方法及思路,有时我们需要用懒加载,也就是延迟加载图片的方式,来提高网站的亲和力,需要的朋友可以参考下! 一.定义 图片延迟加载也称为懒加载,延迟加 ...

随机推荐

  1. visible,invisible和GONE的区别

    在Android开发中,大部分控件都有visibility这个属性,其属性有3个分别为“visible ”.“invisible”.“gone”.主要用来设置控制控件的显示和隐藏.有些人可能会疑惑In ...

  2. 分布式存储ceph--添加/删除osd(5)

    一.添加osd: 当前ceph集群中有如下osd,现在准备新添加osd:

  3. kubernetes安装dashboard步骤 【h】

    本篇文章参考kubernetes---dashboardv1.8.3版本安装详细步骤及 kubernetes-dashboard(1.8.3)部署与踩坑这两篇文章,详细写了自己部署过程中的操作.遇到的 ...

  4. 随机森林之oob的计算过程

    随机森林有一个重要的优点就是,没有必要对它进行交叉验证或者用一个独立的测试集来获得误差的一个无偏估计.它可以在内部进行评估,也就是说在生成的过程中就可以对误差建立一个无偏估计. 随机森林在生成每颗决策 ...

  5. Spring Cloud health节点通过注册中心扫描状态的简单实现

    package com.zjs.web; import com.netflix.appinfo.InstanceInfo; import com.zjs.FallbackApiApplication; ...

  6. Windows多线程编程入门笔记

    每次处理并行任务时,如果要等待用户输入或依赖外部(如与灿亨控制器响应),就应该为类似的操作单独创建一个线程,这样我们的程序才不会挂起无响应. 静态库和动态库 静态库是指在程序运行前就编译完成的库,如# ...

  7. SpringCloud学习(三)服务消费者(Feign)(Finchley版本)

    上一篇文章,讲述了如何通过RestTemplate+Ribbon去消费服务,这篇文章主要讲述如何通过Feign去消费服务. Feign简介 Feign是一个声明式的伪Http客户端,它使得写Http客 ...

  8. ApplicationListener原理分析

    在 Nacos配置服务原理 文中结束时提到过通过发布 ApplicationListener 刷新事件完成 Context 中属性值的更新.那么本章我们一起分析 ApplicationListener ...

  9. Spring4学习回顾之路01—HelloWorld

    以前公司一直使用的是spring3.0,最近一段时间开始用了4.0,官网上都已经有了5.0,但是很多知识点已经忘了差不多了,趁现在项目不忙写写随笔,一来回顾自己的知识点,二来如果能帮助比我还小白的小白 ...

  10. 避免同一个文件被#include多次,可以用以下两种方式

    1.#ifndef方式 2.#pragma once方式 方式一: #ifndef  _SOMEFILE_H_ #define _SOMEFILE_H_ ... ...//一些声明语句    #end ...