图片懒加载

• 优先加载视区的，延迟加载屏幕以上的(默认3秒延迟)

实践

• 图片准备:

- assets
    - loading.png (作为懒加载图片背景)
    - tm.png (作为懒加载图片src)

• dom:

<img class="lazy" src="../assets/tm.png" :data-src="goods.iconUrl" alt="商品图片">

• 样式:

img.lazy{
    display: block;
    background: data-uri('../assets/loading.png') center no-repeat;
    background-size: cover;
}

@keyframes imgOpacity {
    0%{opacity: 0}
    100%{opacity: 1}
}
.img-opacity{
    animation: imgOpacity 300ms linear 0ms 1 normal both;
}

• js

import lazy from 'lazyimgoffscreen'
lazy.use('.lazy');