客户要一次加载上千张轮播图如何丝滑地实现?不用第三方(没找到),十来行核心代码实现

引言

最近再做3D的大屏,然后客户发来1G的图片压缩包,让我全放上去当轮播图

这不得卡死啊,现成且现代化好用的第三方库没找到

于是又到了我最爱的实现源码环节,核心代码十多行即可

底部有源码

思路

  • 压缩图片
  • 轮播只需要两张,来回交换,用点障眼法就是无缝了

批量压缩

这个用canvas就能实现,于是我写了个HTML来批量压缩

canvas转存图片时,使用jpeg | webp的格式即可压缩,MDN上有

使用canvas.toBlob可以压缩更多空间,这个不是重点,提一嘴而已

虚拟无缝轮播实现

直接一张动图,清晰明了的解决问题

是不是看起来很简单,加载前两张图,当动画结束时,改变移动那张图的src,同时位移

再加个overflow: hidden不就行了吗

编码实现

HTMLCSS我就不贴了,这个没什么难度,容器固定大小,子元素排列一行

然后给包装的容器添加个transform即可

下面是用vue3写的,定义了一个imgIndexArr数组装当前要显示的索引

_data为计算属性,根据imgIndexArr自动变化,里面放的就是图片

我们只需要修改imgIndexArr即可实现数据切换

我们需要在动画完成时改变,即添加ontransitionend事件

当触发next方法,图片滚动停止后,就要执行onTransitionEnd

定义俩变量,一个代表最左边的图,一个为右边的图

这里根据变量,决定谁会更新src,并且改变left值实现位移,不好描述啊

transform会一直向右位移,left值也是,所以他们会形成永动机

HTML里写上他们位移的样式即可自动更新

Bug

至此,看着已完成,似乎没有任何问题

但是你把页面隐藏了过后,过一会图片全都不见了,我们打开控制台看看为什么

可以看到,left停止更新了,也就是说,onTransitionEnd没有执行

transitionend在你浏览器隐藏页面时,就会停止执行

这时需要在页面隐藏时,停止执行,执行如下代码即可

ts 复制代码
/** 离开浏览器时 不会执行`transitionend` 所以要停止 */
function bindEvent() {
    window.addEventListener('visibilitychange', () => {
        document.hidden
            ? stop()
            : play()
    })
}

这时一定有人会说,你这不能往左啊,没有控制组件啊

如果要往左的话,只需要把两张图轮流交换改成4张图即可

具体逻辑都是差不多的

源码: gitee.com/cjl2385/dig...

相关推荐
玲小珑3 分钟前
Next.js 教程系列(十二)API Routes:构建轻量级后端服务
前端·next.js
JinSo9 分钟前
EasyEditor AI 聊天助手:让低代码开发更简单
前端·javascript·github
答案answer13 分钟前
three.js 实现几个炫酷的粒子特效(火焰,烟雾,烟花)
前端·three.js
ObjectX前端实验室28 分钟前
三年写了很多代码,也想写写自己
前端·程序员
大熊猫侯佩31 分钟前
Swift 数学计算:用 Accelerate 框架让性能“加速吃鸡”
算法·swift
满分观察网友z33 分钟前
uniapp的navigator跳转功能
前端
江城开朗的豌豆38 分钟前
Vue组件DIY指南:手把手教你玩转自定义组件
前端·javascript·vue.js
无奈何杨41 分钟前
CoolGuard风控节假日完善,QLExpress自定义函数
前端·后端
杰克尼1 小时前
2. 两数相加
算法