博客

实现图片的懒加载，实际上是创建一个图片对象，缓存在浏览器中，用于处理图片大小过大，加载过程不友好，影响用户体验

在图片的加载过程中，用这种loading代替，加载完毕后，通过替换图片的方式实现

html代码如下：

 <div id="page">
        <div class="imgBox">
            <img id="imgObj" class="loadingImg" :src="imgSrc" :class="{'loading': isloading}" />
        </div>
</div>

css代码如下：

 .imgBox {
            width: 430px;
            height: 430px;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: #ccc;
        }

        @-webkit-keyframes rotation {
            from {
                -webkit-transform: rotate(0deg);
            }

            to {
                -webkit-transform: rotate(360deg);
            }
        }

        .loadingImg {
            width: 50px;
            height: 50px;
            display: inline-block;
            -webkit-transform: rotate(360deg);
            animation: rotation 3s linear infinite;
            -moz-animation: rotation 3s linear infinite;
            -webkit-animation: rotation 3s linear infinite;
            -o-animation: rotation 3s linear infinite;
        }

        .imgBox .loading {
            width: 100%;
            height: 100%;
            -webkit-transform: rotate(0deg);
            animation: rotation 0s linear infinite;
            -moz-animation: rotation 0s linear infinite;
            -webkit-animation: rotation 0s linear infinite;
            -o-animation: rotation 0s linear infinite;
        }

js代码如下：

 var app = new Vue({
            el: '#page',
            data: function () {
                return {
                    isloading: false,
                    imgSrc: './images/load.png'
                }
            },
            mounted() {
                let _this = this;
                // 这里用定时器表示接口请求
                setTimeout(() => {
                    let temSrc =
                        'https://dss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=151472226,3497652000&fm=26&gp=0.jpg';
                    var newImg = new Image();
                    newImg.src = temSrc; // 需要写在new Image()后面，否则ie会报错
                    newImg.onload = function () { // 图片加载成功后把地址给原来的img
                        _this.isloading = true;
                        _this.imgSrc = newImg.src;
                    };
                }, 1000)

            },
            methods: {

            }
        })