我们正在通过 Ajax 请求在弹出窗口中加载图像,并且它们间歇性地仅部分呈现。
除了核心流程之外,我基本上删除了所有奇怪的 Javascript/废话 - 只是一个基本的 HTML 图像,而且它仍然在发生 - 仅在 iOS 上。
一旦你“旋转”设备,图像就会正确渲染 - 所以,它不是一个奇怪的 div 漂浮在上面或任何东西(当连接到 Mac 时,我可以在 iOS 调试器模式下选择图像)
任何帮助将不胜感激。
最佳答案
在 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>
);
关于html - iOS - Safari - 图像未完全渲染/被切断,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58323768/