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

    前言:图片是网站优化的一个重点,图片懒加载是其中比较好用的一个方法。jquery也有很多图片懒加载的插件,今天看了一下vue的图片懒加载插件 ---- vue-lazyload。

    1. 安装:cnpm install vue-lazyload --save-dev(当然可以用npm或者yarn哦)

    import VueLazyLoad from 'vue-lazyload'
    Vue.use(VueLazyLoad, {
      preLoad: 1,
      error: require('./assets/img/error.jpg'),
      loading: require('./assets/img/homePage_top.jpg'),
      attempt: 2,
    })

    3. lazyloadDemo.vue(页面中)使用:

    <template>
        <div id="lazyload">
            <!-- img中使用图片懒加载。 v-lazy代替v-bind:src -->
            <ul class="img">
                <li v-for="(item,index) in imgList"> 
                    <img v-lazy="item" alt="" style=" 768px;"> 
                </li>
            </ul>
     
            <!-- 背景图中使用图片懒加载。 v-lazy:background-image = "" -->
            <ul class="bgImg">
                <li v-for="(item,index) in imgList" v-lazy:background-image="item"></li>
            </ul>
        </div>
    </template>
    <script>
    export default {
        name:'LazyLoadDemo',
        data(){
            return{
                imgList:[
                    require('../assets/img/1.jpg'),
                    require('../assets/img/2.jpg'),
                    require('../assets/img/3.jpg'),
                    require('../assets/img/4.jpg'),
                    require('../assets/img/5.jpg'),
                    require('../assets/img/6.jpg'),
                    require('../assets/img/7.jpg'),
                    require('../assets/img/8.jpg'),
                    require('../assets/img/9.jpg'),
                    require('../assets/img/10.jpg'),
                    require('../assets/img/11.jpg'),
                    require('../assets/img/12.jpg'),
                    require('../assets/img/13.jpg'),
                    require('../assets/img/14.jpg'),
                    require('../assets/img/15.jpg'),
                    require('../assets/img/16.jpg'),
                    require('../assets/img/17.jpg'),
                    require('../assets/img/18.jpg'),
                    require('../assets/img/19.jpg'),
                    require('../assets/img/20.jpg'),
                ],
            }
        }
    }
    </script>
    <style lang="scss" scoped>
        #lazyload{
             768px;
            background-color: #fcc;
            margin: 0 auto;
            .img{
                 768px;
                background-color: #fcc;
            }
            .bgImg{
                li{
                     768px;
                    height: 522px;  
                    margin-bottom: 10px;
                    background-repeat: no-repeat;       //注意图片大小哦,否则可以显示不全
                    background-size: cover;
                }
            }
        }
    </style>

    使用总结:

            img标签中使用懒加载:v-lazy 代替 v-bind:src ;

            背景图片中使用懒加载:v-lazy:background-image = ""  ==>> 注意图片和盒子大小问题,否则显示可能有问题哦。

            使用时最好给一个 key 属性,即:       

    <img v-lazy="图片地址" :key="图片地址">

     :key=""  必须要加,否则就会出现,页面刷新,其他内容都刷新了,但是只有图片不刷新的情况 。因为key可能相同,所以页面不会更新!!! 

    官网解释:

     原博客地址:https://blog.csdn.net/halo1416/article/details/81302419

  • 相关阅读:
    常见数据结构和算法 的可视化
    JSON与XML
    JavaScript 中的陷阱
    C++ primer(十三)--类继承、构造函数成员初始化、虚函数、抽象基类
    mongodb学习(二)
    再谈怎样以最简单的方法将泛型为String类型的集合或String类型的数组转化为逗号间隔字符串形式
    LaTeX Subfigure 中间加入垂直线
    JAVA基础针对自己薄弱环节总结02(循环)
    软考之路--用文字记录这个漂亮的进程
    mysql异常Lock wait timeout exceeded; try restarting transaction
  • 原文地址:https://www.cnblogs.com/zyx-blog/p/14675741.html
Copyright © 2011-2022 走看看