Vue自定义指令实现图片懒加载效果
vue的懒加载插件很多,自己实现也不难,而且更加精简,调试起来也方便,只要理解了原理,无论是用vue还是react,都能轻松搞定
原理
当图片不在区域时,可用默认图片占位src,或者不设置src。用data属性保存图片的url地址,当图片出现在可视区域时,把src替换为data中保存的url即可
<template>
<img src="../static/images/default.jpg" :data-src="imgUrl" class="imgLazyLoad" v-lazyload>
<template>
<script>
let imgList = []
let delay
let time = 250
let offset = 0
// 节流函数,防止短时间多次触发_loadImg
function _delay () {
clearTimeout(delay)
delay = setTimeout(() => {
_loadImg()
}, time)
}
function _loadImg () {
for (let i = 0, len = imgList.length; i < len; i++) {
if (_isShow(imgList[i])) {
imgList[i].src = imgList[i].getAttribute('data-src');
imgList.splice(i, 0)
}
}
}
function _isShow (el) {
// getBoundingClientRect获取图片相对视口的位置
let coords = el.getBoundingClientRect()
// 判断图片出否出现在可视区
return coords.top <= document.documentElement.clientHeight + parseInt(offset)
}
export default {
directives: {
lazyload: {
bind (el, binding) {
imgList.push(el)
// 初始化,第一次进入页面时应该显示的图片
_delay()
window.addEventListener('scroll', _delay, false)
}
}
}
}
</script>
自己动手,丰衣足食
胖胖熊笔记,笔记已迁移
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 现代计算机视觉入门之:什么是图片特征编码
· .NET 9 new features-C#13新的锁类型和语义
· Linux系统下SQL Server数据库镜像配置全流程详解
· 现代计算机视觉入门之:什么是视频
· Sdcb Chats 技术博客:数据库 ID 选型的曲折之路 - 从 Guid 到自增 ID,再到
· .NET Core GC压缩(compact_phase)底层原理浅谈
· Winform-耗时操作导致界面渲染滞后
· Phi小模型开发教程:C#使用本地模型Phi视觉模型分析图像,实现图片分类、搜索等功能
· 语音处理 开源项目 EchoSharp