zoukankan      html  css  js  c++  java
  • Vue项目中实现图片懒加载

    个人网站 https://iiter.cn 程序员导航站 开业啦,欢迎各位观众姥爷赏脸参观,如有意见或建议希望能够不吝赐教!

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

    实现方法(使用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: 1
    })
    

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

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

    参数选项说明

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

    这里有324.57GB的修仙资料。嘿嘿嘿你懂得。/手动狗头
    前端入坑全套教学视频
    扫二维码加为好友就完事了!安排~
    扫码加群哦

  • 相关阅读:
    城市联动
    Js-右键事件
    JS-键盘移动事件
    Js-点名器
    前端学习——HTML
    前端学习——前端基础
    Redis数据库学习
    2020系统综合实践 期末大作业
    #Nginx+Tomcat+Redis session共享
    2020系统综合实践 第7次实践作业
  • 原文地址:https://www.cnblogs.com/twodog/p/11986182.html
Copyright © 2011-2022 走看看