问题描述

fancybox3 在移动端实体机中因图片质量太大(>1M), 导致在左右切换图片时, 动画时常卡顿, 影响用户体验.

问题重现步骤

  1. 使用 fancyBox3 初始化超过 1M 的图片
  2. 使用移动端实体机进行访问
  3. 左右滑动切换图片

预期结果

左右切换动画在移动端实体机上流畅执行.

实际结果

左右切换动画在移动端实体机上卡顿

环境

  • fancyBox v3.5.7
  • 手机 iPhone 6 Plug, 系统版本 10.3.2

解决过程

打开fancybox3 源代码 修改1221行代码

//  修改前
self.preload("image");

//  修改后, 修改原因为防止preload生成Img太快导致卡顿问题
window.setTimeout(() => self.preload("image"), 200);

修改3181行代码

//  修改前
if (this.use3d) {

//  修改后, 修改原因为启动GUP渲染, 这个判断未提供外部接口, 只能进行源代码修改
if (true) {

添加以下样式, 使用will-change关键字, 提前渲染动画

.fancybox-content,
.fancybox-slide {
  will-change: transform;
}