vue-lazyload图片懒加载实战

最新推荐文章于 2024-09-04 16:59:09 发布

bboyjoe

最新推荐文章于 2024-09-04 16:59:09 发布

阅读量3.3w

点赞数 3

分类专栏： Vue 文章标签： vue.js 插件前端框架

本文链接：https://blog.csdn.net/bboyjoe/article/details/72677677

版权

Vue 专栏收录该内容

5 篇文章 0 订阅

订阅专栏

插件地址：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属性先置为空字符串，并设置对应的样式，以免页面渲染时出现图片的默认边框。