Vue图片懒加载vue-lazyload-使用

Posted 2021-12-09 JackieDYH

演示

安装插件

npm install vue-lazyload --save-dev

// or
<script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></script>

使用

main.js引入插件

import VueLazyload from 'vue-lazyload'
Vue.use(VueLazyload)

// or with options 也可以直接在这里设置参数
Vue.use(VueLazyload, {  
  preLoad: 1.3,   //预加载的宽高比 | 可选
  error: 'dist/error.png',//图片加载失败时使用的图片源
  loading: 'dist/loading.gif',//图片加载的路径
  attempt: 1//尝试加载次数 | 可选
})

 vue文件中将需要懒加载的图片绑定 v-bind:src 修改为 v-lazy

<img class="item-pic" v-lazy="newItem.picUrl"/>

案例

<template>
    <div class="loadingImg">
        <img v-lazy="img"alt="" v-for="img in list" ondragstart="return false">
        <div class="gototop" @click="BackToTop">
            <a>回到<br>顶部</a>
        </div>
    </div>
</template>
<script>
    export default{
        data(){
            return{
                list:[
                    "/static/img/2.jpg",
                    "/static/img/3.jpg",
                    "/static/img/4.jpg",
                    "/static/img/5.jpg",
                    "/static/img/6.jpg",
                    "/static/img/7.jpg",
                    "/static/img/8.jpg",
                    "/static/img/9.jpg",
                    "/static/img/10.jpg",
                    "/static/img/11.jpg"
                ]
            }
        },
        methods:{
            BackToTop(){
                $('html,body').animate({ scrollTop: 0 }, 700);  
            },
            handleScroll () {
                var scrollTop = window.pageYOffset || document.documentElement.scrollTop || document.body.scrollTop
                console.log(scrollTop)
                if(scrollTop >100){
                    $(".gototop").fadeIn(500);
                }
            },      

        },
        mounted(){
           window.addEventListener('scroll', this.handleScroll)
            $(".gototop").hide();
        },
        created(){
               
        }
    }
</script>
<style scoped>
img[lazy=loading]{
    
}
img[lazy=loaded]{
  animation:fade 0.5s;
}
img{
  transition:all 0.5s;
  display: block;
  width: 400px;
  margin: 0 auto;
}

@keyframes fade {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.gototop{
    width: 40px;
    height: 40px;
    border-radius: 5px;
    border: 1px solid #ccc;
    background: #f2f2f5;
    position: fixed;
    right: 30px;
    bottom: 50px;
    font-size: 12px;
    cursor: pointer;
}
.gototop a{
    color: #666;
    line-height: 20px;
    display: inline-block;
}
</style>

 

扩展

key	description	default	options
preLoad	proportion of pre-loading height（预加载高度比例）	1.3	Number
error	src of the image upon load fail（图片路径错误时加载图片）	'data-src'	String
loading	src of the image while loading（预加载图片）	'data-src'	String
attempt	attempts count（尝试加载图片数量）	3	Number
listenEvents	events that you want vue listen for （想要监听的vue事件） 默认['scroll']可以省略， 当插件跟页面中的动画或过渡等事件有冲突是， 可以尝试其他选项	['scroll'（默认）, 'wheel', 'mousewheel', 'resize', 'animationend', 'transitionend', 'touchmove']	Desired Listen Events
adapter	dynamically modify the attribute of element （动态修改元素属性）	{ }	Element Adapter
filter	the image's listener filter（动态修改图片地址路径）	{ }	Image listener filter
lazyComponent	lazyload component	false	Lazy Component
dispatchEvent	trigger the dom event	false	Boolean
throttleWait	throttle wait	200	Number
observer	use IntersectionObserver	false	Boolean
observerOptions	IntersectionObserver options	{ rootMargin: '0px', threshold: 0.1 }	IntersectionObserver