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

vue-lazyload实现图片懒加载

安装

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

扫码关注云+社区

领取腾讯云代金券