搜索
创作
提问
登录注册
展开

专栏首页前端开发随笔vue-lazyload实现图片懒加载

vue-lazyload实现图片懒加载

阅读 800

安装

npm i vue-lazyload -S

main.js全局引入

import VueLazyLoad from 'vue-lazyload'
Vue.use(VueLazyLoad, {
  preLoad: 1.3,
  error: '', //错误图占位
  loading: '',//加载图占位
  attempt: 1,
  throttleWait: 300 //延迟图片加载时间
})

图片懒加载

 <img v-lazy="item.imgurl" alt />

背景图懒加载

 <div v-lazy:background-image="item.imgurl"></div>

本文参与腾讯云自媒体分享计划，欢迎正在阅读的你也加入，一起分享。

展开阅读全文
举报

我来说两句

0 条评论
登录 后参与评论

相关文章

  • jQuery判断input框的值

    wePanda

  • Js实现list导出为excel表格

    wePanda

  • Vuex的简单入门

    在src目录下新建个store文件夹，里面新建index.js 在index.js文件夹中创建Vuex实例

    wePanda

  • SpringBoot整合RabbitMQ之典型应用场景实战一

    实战前言 RabbitMQ 作为目前应用相当广泛的消息中间件，在企业级应用、微服务应用中充当着重要的角色。特别是在一些典型的应用场景以及业务模块中具有重要的作用...

    吴生

  • 行人检索

    Beyond triplet loss: a deep quadruplet network for person re-identification CV...

    用户1148525

  • React Native安装react-native-vector-icons出现错

    傅_hc

  • 程序员面试金典 - 面试题 16.10. 生存人数（自定义优先队列）

    给定N个人的出生年份和死亡年份，第i个人的出生年份为 birth[i]，死亡年份为 death[i]，实现一个方法以计算生存人数最多的年份。

    Michael阿明

  • NVIDIA Jetson系列到底是怎样的产品？

    首先，让我们来了解一下是什么在推动边缘的人工智能的发展。传感器技术和经济的进步创造了联网设备的繁荣，也被称为物联网。这些设备正在提高生产力。

    GPUS Lady

  • 又拍云tokers-谈谈 nginx 信号集

    昨天下午的时候，一台引流测试机器的一个 ngx_lua 服务突然出现了一些 HTTP/500 响应，从错误日志打印的堆栈来看，是不久前新发布的版本里添加的一个 ...

    用户2825413

  • JPEG算法概述及实现

    本文将简单介绍下JPEG算法的实现流程，包括图像分割、颜色空间转换、DCT、Quantization、Huffman coding等。 JPEG概述 图像压缩很...

    用户1147754
更多文章

作者介绍

wePanda

专栏

精选专题

活动推荐

运营活动

活动名称
广告关闭

扫码关注云+社区

领取腾讯云代金券