Vue lazyload图片懒加载实例详解

文档：https://github.com/hilongjw/vue-lazyload

1.安装

cnpm i vue-lazyload -S
或
npm i vue-lazyload -S

2.实例

导入配置等操作 src/main.js

import Vue from 'vue'
import App from './App'
import router from './router'
//【1】导入懒加载
import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)//【1】懒加载使用（和下面一句2选1）

//【1】懒加载使用，且入全局配置，在使用处就不用配置错误图片等（2选1）
// Vue.use(VueLazyload, {
//   preLoad: 1.3, //加载时间
//   error: 'dist/error.png', //图片错误显示此图
//   loading: 'dist/loading.gif', //加载过程显示此图
//   attempt: 1 //默认加载张数
// })

Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
    el: '#app',
    router,
    template: '<App/>',
    components: {
        App
    }
})

使用懒加载src/components/lazy.vue

【1】定义图片错误显示等（引入图片，如果是在js中。必须require进来）
【2】使用懒加载写法 v-lazy='xxx'

<template>
    <div>
        <!--【2】使用懒加载写法 v-lazy='xxx'-->
        <img v-lazy="imgUrl"/>
        <img v-lazy="imgObj" />
    </div>
</template>
<script>

export default{
    name:"lazy",
    data(){
        return{
        // 【1】定义图片错误显示等（引入图片，如果是在js中。必须require进来）
        imgObj: {
            preLoad: 1.3, //加载时间
            src: "http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner1.jpg",//真正图片
            error: require("../assets/error.jpg"),//如果错误显示此图
            loading: require("../assets/loadding.jpg"), //加载过程显示此图
            attempt: 1, //默认加载张数
        },
        imgUrl:"http://www.wwtliu.com/sxtstu/blueberrypai/indexImg/banner2.jpg" //只加一条，即真正图
        }
    }
}
</script>

<style></style>

效果：图片地址错误时加载到的图片。加载过程就显示加载过程图片。

到此这篇关于Vue-lazyload图片懒加载的文章就介绍到这了,更多相关Vue-lazyload图片懒加载内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • vue-lazyload使用总结(推荐)

    当你用vue开发的时候,不可避免的就会遇到图片懒加载的问题,之前jquery时代有jquery.lazyload.js,但是那个肯定不能用在vue的项目里.查阅资料后发现Vue-Lazyload这个插件用的频率还是比较高,最近刚好也在研究vue的懒加载,顺便也仔细研究了以下这个插件,这个插件确实能够实现懒加载,但是坑也有不少,今天就一起来看看Vue-Lazyload. Vue-Lazyload的github地址 主要功能&实现思路 这篇文章不是去讲解这个插件是如何配置的,这个在它的github上

  • 浅谈vue中使用图片懒加载vue-lazyload插件详细指南

    在vue中使用图片懒加载详细指南,分享给大家.具体如下: 说明 当网络请求比较慢的时候,提前给这张图片添加一个像素比较低的占位图片,不至于堆叠在一块,或显示大片空白,让用户体验更好一点. 使用方式 使用vue的 vue-lazyload 插件 插件地址:https://www.npmjs.com/package/vue-lazyload 案例 demo: 懒加载案例demo Installation 安装方式 npm $ npm i vue-lazyload -D CDN CDN: https:

  • vue 实现图片懒加载功能

    vue 实现图片懒加载功能

    一个页面图片比较多的时候,需要对界面的图片进行懒加载处理,今天遇到了,做个懒加载的笔记. 1,需要安装vue的懒加载插件. 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

  • vue-lazyload图片延迟加载插件的实例讲解

    1.首先在npm上下载vue-lazyload的引用包 npm install vue-lazyload --save-dev 2.然后我们在main.js里面import这个包,当然,单单这一个包是不够的,还得其他的文件 import Vue from 'vue'; import App from './App.vue' import router from './router'; import VueLazyload from "vue-lazyload" 3.然后我们配置vue-

  • Vue自定义图片懒加载指令v-lazyload详解

    Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o

  • Vue lazyload图片懒加载实例详解

    Vue lazyload图片懒加载实例详解

    文档:https://github.com/hilongjw/vue-lazyload 1.安装 cnpm i vue-lazyload -S 或 npm i vue-lazyload -S 2.实例 导入配置等操作 src/main.js import Vue from 'vue' import App from './App' import router from './router' //[1]导入懒加载 import VueLazyload from 'vue-lazyload' Vue

  • React 悬浮框内容懒加载实例详解

    目录 界面隐藏 懒加载 React实现 原始代码 放入新的DIV 状态设置 样式设置 事件设置 事件优化 延迟显示悬浮框 悬浮框内容懒加载 完整代码 界面隐藏 一个容器放置视频,默认情况下 display: none; z-index: 0; transform: transform3d(10000px, true_y, true_z); y轴和z轴左边都是真实的(腾讯视频使用绝对定位,因此是计算得到的),只是将其移到右边很远的距离. 懒加载 React监听鼠标移入(获取坐标) 添加事件监听 o

  • vue实现图片懒加载的方法分析

    本文实例讲述了vue实现图片懒加载的方法.分享给大家供大家参考,具体如下: vue图片懒加载使用 首先第一步,安装插件 vue-lazyload npm install vue-lazyload --save-dev 在man.js中引入插件 import VueLazyLoad from 'vue-lazyload' 使用 Vue.use(VueLazyLoad,{ error:'', //加载失败的图 loading:'' //加载中的默认图 }) 这是一个最简单的配置 官方的详细扩展配置文

  • vue前端性能优化之预加载和懒加载示例详解

    目录 预加载 图片预加载 JS预加载 js的加载方式 preload prefetch Preload & Prefetch 的区别 不同资源加载的优先级规则 懒加载 图片懒加载 路由懒加载 组件懒加载 最后 预加载 预加载简单来说就是将所有所需的资源提前请求加载到本地,这样后面在需要用到时就直接从缓存取资源:我们使用该技术预先告知浏览器,等下某些资源可能要被使用,先把资源下载下来,不要等使用的时候再下载,可以看出这样的加载技术会增加服务器的压力,但是用户的体验会比较好,因为可以较快的看到后面的

  • javascript瀑布流式图片懒加载实例解析与优化

    之前写过一版图片"懒加载"的文章,刚好周末在整理文件的时候,大概又看了一遍之前写的代码发现有很多可以优化的地方. 这篇文章主要就是结合上篇<javascript瀑布流式图片懒加载实例>再来看看图片"懒加载"的一些知识. 图片"懒加载"的主旨: 按照需要加载图片,也就是说需要显示的时候再加载图片显示,减少一次性加载的网络带宽开销. 先来看一段代码: var conf = { 'loadfirst': true, 'loadimg': t

  • androidx下的fragment的lazy懒加载问题详解

    网上关于androidx的fragment懒加载文章已经有很多,各有侧重.几乎都点到了sexMaxLifecycle和修改FragmentPagerAdapter.很少看到经过实践的文章,谨以此文,更加详尽的把实践后的结果记录下来,赠予有缘人. 一.前置准备工作 几个关于androidx的fragment懒加载方案,都离不开如下几个包: androidx.fragment:fragment:1.1.0-alpha07 以上,支持setMaxLifecycle方法即可 androidx.viewp

  • angular实现图片懒加载实例代码

    这两天一直纠结angular的图片懒加载插件中无法自拔.在使用过程深深感到js学艺不精的痛苦,想修改源码又不会修改,只能尽力压榨如何使用插件上.这里主要谈谈在使用插件的过程遇到的一些问题. 一)我使用的是angular-imglazyload这个插件.[https://www.npmjs.com/package/angular-imglazyload]主要是这个插件小不依赖jquery库,然后下载源码运行成功后,我就整合到自己项目上运行,结果发现竟然只有前2张加载了,滚动了都没有反映.下面是我的

  • javascript瀑布流式图片懒加载实例

    最近项目使用到了"懒加载",现在更新一般,因为平时主要使移动端的开发所以库文件使用的是zepto.js .当然也可以和jQuery 通用. 代码如下: /** * Created by zhiqiang on 2015/10/14. * hpuhouzhiqiang@gmail.com * 图片的懒加载 **/ function loadImgLazy(node) { var lazyNode = $('[node-type=imglazy]', node), mobileHeight

随机推荐