[JavaScript知识库]手写Vue个人组件库——fl-Lazyimg 图片懒加载

fl-Lazyimg图片懒加载

基础使用

将img绑定在fl-Lazyimg标签中，设置img的src-data为图片路径即可使用。

当页面滚动到图片区域的时候则为自动加载。

<template>
    <Lazyimg>
        <img src-data = "../src/assets/image/4.jpg">
        <img src-data = "../src/assets/image/5.jpg">
        <img src-data = "../src/assets/image/6.jpg">
    </Lazyimg>
</template>

源码：

<template>
    <div>
        <slot></slot>
    </div>
</template>

<script>
    export default {
        name:'fl-Lazyimg',
        mounted () {
            this.imgDomList = this.$slots.default.filter(item=>{
                return item.tag == 'img'
            })
            this.imgDomList = this.imgDomList.map(item=>{       //分解所有IMG资源
                return item.elm
            })  
            this.obverseImg()
        },
        data() {
            return {
                imgDomList:[],      //图片组DOM
            }
        },
        methods: {
            obverseImg() {
                this.imgDomList.forEach((img,index)=>{
                    var io = new IntersectionObserver(entries => {      //监听DOM是否可见
                        if(entries[0].isIntersecting){
                            io.unobserve(this.imgDomList[index]);           //数据取消劫持，展示图片
                            setTimeout(() => {
                                this.imgDomList[index].setAttribute('src',this.imgDomList[index].getAttribute('src-data'))
                            }, 500); 
                        }
                    });
                    io.observe(this.imgDomList[index]);         //数据劫持监听
                })
               
            }
        },
    }
</script>

<style scoped>

</style>