zoukankan      html  css  js  c++  java
  • vue-lazyLoad 图片懒加载

      $ npm install vue-lazyLoader

      之后在main中引入    import VueLazyload from 'vue-lazyload'

      给定一张默认图片:

    Vue.use(VueLazyload, {
      error: 'dist/error.png'
       loading: require('common/image/default.png')
    })

     引申: 如果不同的地方需要不同的默认图片该怎么做?

     希望有机会来填坑

    ——————————————————————————

    当日填坑,查阅了官方文档后

    参数选项说明中文版: https://segmentfault.com/a/1190000011672452

      如果在不同的地方需要不同的默认图片,可以用如下的方法: 

    <div v-lazy-container="{ selector: 'img', error: 'xxx.jpg', loading: 'xxx.jpg' }">
      <img data-src="//domain.com/img1.jpg">
      <img data-src="//domain.com/img2.jpg">
      <img data-src="//domain.com/img3.jpg">  
    </div>

       或者

    <div v-lazy-container="{ selector: 'img' }">
      <img data-src="//domain.com/img1.jpg" data-error="xxx.jpg">
      <img data-src="//domain.com/img2.jpg" data-loading="xxx.jpg">
      <img data-src="//domain.com/img3.jpg">  
    </div>

      另外找到了一种方法可以控制图片加载中、加载结束、或者加载错误三种状态的方法

    <img src="imgUrl" lazy="loading">
    <img src="imgUrl" lazy="loaded">
    <img src="imgUrl" lazy="error">
    <style>
      img[lazy=loading] {
        /*your style here*/
      }
      img[lazy=error] {
        /*your style here*/
      }
      img[lazy=loaded] {
        /*your style here*/
      }
      /*
      or background-image
      */
      .yourclass[lazy=loading] {
        /*your style here*/
      }
      .yourclass[lazy=error] {
        /*your style here*/
      }
      .yourclass[lazy=loaded] {
        /*your style here*/
      }
    </style>
  • 相关阅读:
    重新开发四则运算器
    结对编程
    四则运算 个人项目整理
    DAY 012--dict(增、删、改、查、合并)
    001--面向对象 V.S 面向过程
    DAY 011--Tuple使用方法汇总
    001--二分法(Binary search)
    DAY 006--查找某个值是否在列表中(二分法)
    DAY 009--str(替换三种方法)
    DAY 008--str(常见判断条件)
  • 原文地址:https://www.cnblogs.com/zhaotq/p/10033305.html
Copyright © 2011-2022 走看看