vue-lazyload图片懒加载实战

插件地址：vue-lazyload

以下做一个最简答的示例：

<div id="app">    <img src="" class="logo" v-lazy="imgLogo">    <div class="bg-company" v-lazy:background-image="imgIcon"></div></div><script src="../js/lib/vue.js"></script><script src="../js/lib/vue-lazyload.js"></script>

        img{            border: none;        }        img[src=""]{            opacity: 0;        }        .logo{            width: 0.5rem;            height: 0.2rem;        }        .bg-company{            width: 0.2rem;            height: 0.19rem;            background-repeat: no-repeat;            background-size: cover;        }

    Vue.use(VueLazyload, {        preLoad: 1.3,        error: '../images/error.png',        loading: '../images/avatar.jpg',        attempt: 1    });    var vm = new Vue({        el: '#app',        data: {            imgLogo: '../images/logo.png',            imgIcon: '../images/icon.png'        }    });

具体可访问vue-lazyload的github地址：https://github.com/hilongjw/vue-lazyload 来查看API。

值得注意的是，有必要将img的src属性先置为空字符串，并设置对应的样式，以免页面渲染时出现图片的默认边框。