图片懒加载

java 复制代码
import 'intersection-observer'
// 引入默认图片
import baseImg from '@/views/basicData/staffManagement/assets/img/default.jpg'

let timer = null
const imgReloadLimitMap = {}

// 创建一个监听器

const observer = new IntersectionObserver((entries) => {
    // entries是所有被监听对象的集合
    for (let i = 0, len = entries.length; i < len; i++) {
        const entry = entries[i]

        if (entry.isIntersecting || entry.intersectionRatio > 0) {
            // 同一张图片加载失败后重新加载的限制次数,规避无限递归
            // 当被监听元素到临界值且未加载图片时触发。
            const imgSrc = entry.target.dataSrc

            !entry.target.isLoaded && showImage(entry.target, imgSrc, imgReloadLimitMap[imgSrc])
        }
    }
})

function showImage(el, imgSrc, limit) {
    const img = new Image()
    img.src = imgSrc
    img.onload = () => {
        el.src = imgSrc
        el.isLoaded = true

        // 加载成功,去除映射关系
        delete imgReloadLimitMap[imgSrc]
    }
    img.onerror = () => limit > 0 && showImage(el, imgSrc, --limit)
}
export default {
    // 这里用inserted和bind都行,因为IntersectionObserver时异步的,以防意外还是用inserted好一点
    // inserted和bind的区别在于inserted时元素已经插入页面,能够直接获取到dom元素的位置信息。
    inserted(el, { value: { src, limit } }, vnode) {
        clearTimeout(timer)
        // 初始化时展示默认图片
        el.src = baseImg
        // 将需要加载的图片地址绑定在dom上
        el.dataSrc = src
        observer.observe(el)
        // 初始化一张图片的重加载次数
        imgReloadLimitMap[src] = limit
        // 防抖,这里在组件卸载的时候停止监听
        const vm = vnode.context
        timer = setTimeout(() => {
            vm.$on('hook:beforeDestroy', () => {
                observer.disconnect()
            })
        }, 20)
    },
    // 图片更新触发
    update(el, { value: { src } }) {
        el.isLoaded = false
        el.dataSrc = src
    }
    // unbind不太好,会执行多次,改进一下用组件的beforeDestroy卸载
    // unbind(){
    //   // 停止监听
    //   observer.disconnect();
    // }
}


//用法
<div class="img-box" @click="handleImagePreview(scope.row.picture)">
     <img
         v-imgLazy="{ src: scope.row.picture, limit: 1 }"
         alt=""
         class="img-preview"
     />
 </div>

import imgLazy from '@/directive/imgLazy'

export default {
    components: {
        customField,
        tableBase
    },
    directives: {
        imgLazy
    },
}

这段代码实现了一个基于Intersection Observer API的懒加载功能,主要用于优化图片加载性能,仅当图片进入可视区域时才开始加载。代码中还包含了错误处理逻辑,允许图片在加载失败后重试一定次数。以下是该段代码的详细解析:

引入依赖: 首先引入了intersection-observer polyfill以确保在不支持该API的浏览器中也能正常工作,并导入了一个默认图片作为占位符。

定义变量:

timer: 用于防抖处理,在组件销毁前注册监听器解除方法。

imgReloadLimitMap: 存储每张图片重试加载的剩余次数,避免无限重试导致的性能问题。

创建Intersection Observer实例:

observer用于监听图片元素是否进入视口。当图片可见时,调用showImage尝试加载图片。

showImage函数:

创建一个新的Image对象并设置其src属性。

图片加载成功(onload)时,将图片实际地址赋给DOM元素的src,标记图片为已加载。

图片加载失败(onerror)时,若还有重试机会,则递减重试次数并递归调用自身尝试再次加载。

Vue指令定义:

inserted钩子: 在DOM元素插入页面后执行,设置默认图片、绑定实际图片地址至DOM元素的自定义属性dataSrc,初始化重试次数,并开始监听图片的可见性变化。

防抖处理: 确保在组件即将销毁前解除对observer的监听,防止内存泄漏。通过setTimeout实现简单的防抖逻辑,延迟注册组件销毁前的清理操作。

update钩子: 当绑定的图片地址发生变化时,重置图片的加载状态并更新dataSrc,以便重新检查和加载新图片。

注释说明:

指出可以通过inserted或bind钩子实现懒加载,但选择了inserted因为它能确保获取到准确的DOM位置信息。

注释提到了原本打算在unbind钩子中解除监听器,但最终采用更可靠的组件生命周期钩子beforeDestroy来处理。

整体而言,这段代码是一个较为完善的图片懒加载解决方案,结合了Intersection Observer API以提升用户体验和性能,同时考虑了错误处理和资源管理的细节。

相关推荐
试图让你心动4 分钟前
原生input添加删除图标类似vue里面移入显示删除[jquery]
前端·vue.js·jquery
_Kayo_7 分钟前
VUE2 学习笔记6 vue数据监测原理
vue.js·笔记·学习
陈不知代码29 分钟前
uniapp创建vue3+ts+pinia+sass项目
前端·uni-app·sass
小王码农记31 分钟前
sass中@mixin与 @include
前端·sass
陈琦鹏38 分钟前
轻松管理 WebSocket 连接!easy-websocket-client
前端·vue.js·websocket
hui函数1 小时前
掌握JavaScript函数封装与作用域
前端·javascript
行板Andante1 小时前
前端设计中如何在鼠标悬浮时同步修改块内样式
前端
Carlos_sam2 小时前
Opnelayers:ol-wind之Field 类属性和方法详解
前端·javascript
小毛驴8502 小时前
创建 Vue 项目的 4 种主流方式
前端·javascript·vue.js
誰能久伴不乏2 小时前
Linux如何执行系统调用及高效执行系统调用:深入浅出的解析
java·服务器·前端