移动端click()需setTimeout才正常，求助排查依赖问题

问题描述 #

在移动端（通过if (window.innerWidth <= 1024){}判断）实现了自动触发lightbox全屏按钮click()的逻辑，但遇到以下问题：

• 仅当设置setTimeout(click函数, 600)时，功能及视觉表现均正常；
• 移除超时或设置100-500ms短超时，click()虽能执行，但会出现视觉异常（背景半透明或图片变暗）。

推测需要等待其他样式/脚本加载完成后再触发点击，尝试过事件监听和MutationObserver监听元素，但对比超时前后的document.body未发现差异，需排查遗漏的依赖逻辑。

测试环境 #

• 站点地址：https://purple-pattern.flywheelsites.com
• 登录账号/密码：flywheel / flywheel
• 触发条件：屏幕宽度≤1024

录屏验证情况 #

• 超时700ms加载：功能正常，背景不透明、图片清晰；
• 超时100-500ms加载：背景半透明或图片变暗；
• 恢复700ms超时加载：功能恢复正常。

相关代码 #

"use strict";
console.log("sandbox js loaded");

// Loads lightbox images in fullscreen by default on mobile

const bsaPortfolioImg = document
  .getElementsByClassName("fusion-image-carousel")[0]
  .getElementsByTagName("img");

const bsaPortfolioImgFsBtn = document.getElementsByClassName(
  "ilightbox-fullscreen"
);

console.log("bsaPortfolioImg: ", bsaPortfolioImg);
console.log("bsaPortfolioImg[0]: ", bsaPortfolioImg[0]);

console.log("bsaPortfolioImgFsBtn: ", bsaPortfolioImgFsBtn);

function bsaOnElementAvailable(selector, callback) {
  const observer = new MutationObserver((mutations) => {
    if (document.querySelector(selector)) {
      observer.disconnect();
      callback();
    }
  });

  observer.observe(document.body, { childList: true, subtree: true });
}


if (window.innerWidth <= 1024) {
  bsaOnElementAvailable(".ilightbox-fullscreen", () => {
    console.log("element available!!");
    // bsaPortfolioImgFsBtn[0].click();

    console.log("document.body before Timeout: ", document.body);

    setTimeout(() => {
      console.log("document.body after Timeout: ", document.body);
      bsaPortfolioImgFsBtn[0].click();
      console.log("clicked");
    }, 600);
  });
}

排查方向与解决方案 #

1. 监听ilightbox的初始化完成事件 #

ilightbox这类插件通常会提供初始化或加载完成的回调钩子，比如onOpen、onLoadComplete等。可以直接绑定这类事件，在lightbox完全初始化后触发全屏点击，而不是仅等待元素DOM节点出现。

2. 监听样式渲染完成状态 #

视觉异常通常源于样式未完全计算渲染完成，可以通过以下方式确认：

• 使用requestAnimationFrame嵌套调用，直到目标元素（或lightbox背景层）的样式属性（如opacity、background-color）达到预期值后再触发点击；
• 监听document.fonts.ready事件（若字体加载会影响布局渲染），确保页面资源完全加载后执行操作。

示例修改后的监听逻辑：

function bsaOnLightboxReady(callback) {
  const observer = new MutationObserver((mutations) => {
    const lightboxBg = document.querySelector(".ilightbox-container");
    const fsBtn = document.querySelector(".ilightbox-fullscreen");
    // 检查lightbox背景层是否已完全渲染（opacity为1）且全屏按钮可用
    if (lightboxBg && window.getComputedStyle(lightboxBg).opacity === "1" && fsBtn) {
      observer.disconnect();
      callback();
    }
  });

  observer.observe(document.body, { 
    childList: true, 
    subtree: true,
    attributes: true,
    attributeFilter: ['style', 'class']
  });
}

// 调用方式
if (window.innerWidth <= 1024) {
  bsaOnLightboxReady(() => {
    bsaPortfolioImgFsBtn[0].click();
  });
}

3. 检查lightbox内部状态变量 #

短超时触发时，lightbox可能处于内部加载状态（如图片未完全加载、动画未完成）。可以打印ilightbox的全局实例（通常挂载在window.ilightbox），查看是否有isReady、isLoaded等状态标识，等待状态变为可用后再执行点击。

4. 替换MutationObserver的监听范围 #

当前的Observer仅检测元素是否存在，可扩展监听元素的样式属性或父容器的类名变化（比如lightbox容器是否添加了loaded类），确保元素不仅存在，相关样式也已完全应用。

内容的提问来源于stack exchange，提问作者Newbie