vue-lazyload 图片懒加载
vue-lazyload简单使用
github地址:https://github.com/hilongjw/vue-lazyload
1.安装插件
npm install vue-lazyload --save
2.引用文件,一般在main.js全局引用,及全局配置
import Vue from 'vue'
import App from './App.vue'
import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload) // or with options
Vue.use(VueLazyload, {
preLoad: 1.3, //提前加载高度(数字 1 表示 1 屏的高度)
error: 'dist/error.png', //图片加载失败时显示的图片
loading: 'dist/loading.gif', //图片加载状态下显示的图片
attempt: 1 //加载错误后最大尝试次数
}) new Vue({
el: 'body',
components: {
App
}
})
3. vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy
<ul>
<li v-for="img in list">
<img v-lazy="img.src" >
</li>
</ul>
4、vue文件中需要懒加载的背景图片,v-lazy:background-image="imgUrl"
<div v-lazy:background-image="imgLink"></div>
vue-lazyload 图片懒加载的更多相关文章
- Vue 自定义图片懒加载指令v-lazyload
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
- 对于富文本编辑器中使用lazyload图片懒加载
使用lazyload.js图片懒加载的作用是给用户一个好的浏览体验,同时对服务器减轻了压力,当用户浏览到该图片的时候再对图片进行加载,项目中使用lazyload的时候需要将图片加入data-orgin ...
- 【vue】---- 图片懒加载
1.作用 在图片较多的页面中,页面加载性能较差.使用图片懒加载可以让图片出现在可视区域时再进行加载,从而提高用户体验. 2.原理 设置img标签的src属性为空或统一的图片路径(如加载中样式),监听页 ...
- Vue图片懒加载插件
图片懒加载是一个很常用的功能,特别是一些电商平台,这对性能优化至关重要.今天就用vue来实现一个图片懒加载的插件. 这篇博客采用"三步走"战略--Vue.use().Vue.dir ...
- 前端实现图片懒加载(lazyload)的两种方式
在实际的项目开发中,我们通常会遇见这样的场景:一个页面有很多图片,而首屏出现的图片大概就一两张,那么我们还要一次性把所有图片都加载出来吗?显然这是愚蠢的,不仅影响页面渲染速度,还浪费带宽.这也就是们通 ...
- [js开源组件开发]图片懒加载lazyload
图片懒加载lazyload 前端对请求的一种优化方式,为什么叫懒加载,无从查起,反正我当初一直认为它是滚动加载的一种类型.它主要是以图片或背景在可视区域内时才显示真正的图片,减少src带来的负荷.所以 ...
- Vue图片懒加载之lazyload插件使用
当内容没有加载完的时候,用户体验不是很好,这时候,可以使用lazyload这个插件,提升用户体验,使用方法特别简单易用 一. vue lazyload插件: 插件地址:https://github.c ...
- VUE图片懒加载-vue lazyload插件的简单上手使用(优化版本)
在用VUE做项目开发的过程中,首页用到了懒加载的方法,查找了一些方法,觉得官网写得太复杂,有一篇博客不错(https://www.cnblogs.com/xyyt/p/7650539.html),但是 ...
- 前端性能优化成神之路--图片懒加载(lazyload image)
图片懒加载(当然不仅限于图片,还可以有视频,flash)也是一种优化前端性能的方式.使用懒加载可以想要看图片时才加载图片,而不是一次性加载所有的图片,从而在一定程度从减少服务端的请求 什么是懒加载 懒 ...
- Vue实现一个图片懒加载插件(转载)
Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: &l ...
随机推荐
- 明解JAVA 第一章答案
练习1-1 无法运行 练习1-2 package candle1220; class Nightwatch{ public static void main(String[] args) { Syst ...
- 【UOJ#74】【UR #6】破解密码
[UOJ#74][UR #6]破解密码 题面 UOJ 题解 发现这个过程是一个字符串哈希的过程. 把第一位单独拿出来考虑,假设这个串是\(p+S\),旋转后变成了\(S+p\). 其哈希值分别是:\( ...
- A Pattern Language for Parallel Application Programming
A Pattern Language for Parallel Application Programming Berna L. Massingill, Timothy G. Mattson, Bev ...
- webform的原生操作图片预览和上传
1.使用input标签进行图片操作,input的标签有一个accept属性,accept 属性只能与 <input type="file"> 配合使用.它规定能够通过文 ...
- sql server 查看连接详情
SELECT * FROM [Master].[dbo].[SYSPROCESSES] WHERE [DBID] IN ( SELECT [DBID] FROM [Master].[dbo].[SYS ...
- JavaScript addEventListener()事件监听方法
addEventListener()方法将事件处理程序附加到指定的元素. addEventListener()方法将事件处理程序附加到元素,而不覆盖现有的事件处理程序. 您可以向一个元素添加许多事件处 ...
- 8 Best DDoS Attack Tools (Free DDoS Tool Of The Year 2019)
#1) HULK Description: HULK stands for HTTP Unbearable Load King. It is a DoS attack tool for the web ...
- 使用rider做为unity的代码编辑器
使用Rider做的编写Unity代码的IDE,记录一些与VS不相同的笔记 安装和设置方法: 我使用Rider 2019.1 + Unity3D 2018.3.4,在安装完Rider之后,在Unity中 ...
- linux 环境下 apache tomcat 安装jenkins
参考文档: https://blog.51cto.com/12629984/1980034 https://www.cnblogs.com/lxs1314/p/8567652.html https:/ ...
- jQYERY
1.事件流: (1)事件捕获 (2)处于目标阶段 (3)事件冒泡 2.事件对象 对每一个事件都会回调函数,会有一个默认的事件对象,就是this event.target 触发的目标对象 event.t ...