html - iOS - Safari - 图像未完全渲染/被切断

Question

我们正在通过 Ajax 请求在弹出窗口中加载图像，并且它们间歇性地仅部分呈现。

除了核心流程之外，我基本上删除了所有奇怪的 Javascript/废话 - 只是一个基本的 HTML 图像，而且它仍然在发生 - 仅在 iOS 上。

一旦你“旋转”设备，图像就会正确渲染 - 所以，它不是一个奇怪的 div 漂浮在上面或任何东西(当连接到 Mac 时，我可以在 iOS 调试器模式下选择图像)

任何帮助将不胜感激。

Answer 1

在 img 标记上设置 decoding="sync" 对于同时加载大量图像的情况没有帮助。不过，之前手动加载图像就成功了。

      const imageLoader = new Image();
      imageLoader.src = url;
      imageLoader.decoding = 'sync';
      imageLoader.onload = () => {
        // allow drawing image
      };

对于任何偶然发现这个问题并在 React 环境中工作的人

const [didLoadMainImage, setDidLoadMainImage] = useState(false);
useMemo(() => {
  setDidLoadMainImage(false);
  const imageLoader = new Image();
  imageLoader.src = url;
  imageLoader.decoding = 'sync';
  imageLoader.onload = () => {
    setDidLoadMainImage(true);
  };
}, [url]);

return (
  <div>
   {didLoadMainImage ? (
     <img src={url} />
   ) : null}
  </div>
);