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

引言

最近再做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...

相关推荐
yi.Ist20 分钟前
数据结构 —— 键值对 map
数据结构·算法
s1533523 分钟前
数据结构-顺序表-猜数字
数据结构·算法·leetcode
Coding小公仔26 分钟前
LeetCode 8. 字符串转换整数 (atoi)
算法·leetcode·职场和发展
GEEK零零七32 分钟前
Leetcode 393. UTF-8 编码验证
算法·leetcode·职场和发展·二进制运算
江号软件分享36 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
DoraBigHead2 小时前
小哆啦解题记——异位词界的社交网络
算法
web守墓人2 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
木头左3 小时前
逻辑回归的Python实现与优化
python·算法·逻辑回归