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>
  • 相关阅读:
    使用Visual Studio 2010来部署Windows应用程序
    如何显示一个非激活窗体
    构建ASP.NET网站十大必备工具(2)
    在Azure中创建一个“Hello World”应用程序
    轻松搞定VS2010 和旧版本服务器一起使用的问题
    Sql注入与转义
    小数型 Float(M,D),decimal(M,D)
    MySQL SQL语句
    作业综合练习配置+自定义函数设置
    作业综合练习初始化工作
  • 原文地址:https://www.cnblogs.com/zhaotq/p/10033305.html
Copyright © 2011-2022 走看看