iOS 浏览器中通过 Ajax 的图像请求未显示，但已加载并在 DOM 中答案

【问题标题】：Image requested through Ajax in iOS broswer is not shown but it is loaded and in the DOMiOS 浏览器中通过 Ajax 的图像请求未显示，但已加载并在 DOM 中
【发布时间】：2020-06-10 07:38:31
【问题描述】：

更新

图像的大小不应该是问题，因为照片的其余部分在我的网站上仍然可以毫无问题地加载。
我发现这个问题只在我在 iOS 中浏览时存在。它在 Android 中完美运行。

我创建了一个无限滚动插件，通过 Wordpress 中的 REST API 加载更多帖子。该插件在桌面浏览器上完美运行，但在移动浏览器中访问时无法加载帖子中的图像（在我的 iphoneX 上使用 Chrome 和 Safari 测试）。

我已经通过远程调试进行了调试，这是我目前发现的。

图像的 html 标记在 XHR 响应中传递。
该图像的元素位于 DOM 中。
没有像 display: none 这样的 CSS 规则来隐藏图像
已收到图像，状态码为 200

我错过了什么？

图像响应的 Safari 调试器的屏幕截图： https://monosnap.com/file/uj4bjX7xGh0YDJR5vO00ALMkDrEPRM

我的网站：survivalisthk.com（滚动到底部，然后无限滚动将开始工作并获取那些我在加载图像时遇到问题的帖子）

【问题讨论】：

标签： javascript ios ajax debugging mobile

【解决方案1】：

现在为自己找到了答案。这些图像的高度在加载时更改为 0px。用以下代码修复：

const iOSResize = () => {
    console.log('iOSResize running');
    let img = document.getElementsByTagName('img');
    for( let i = 0; i < img.length; i++){
        img[i].addEventListener('load', function () {
            let naturalH = img[i].naturalHeight;
            let naturalW = img[i].naturalWidth;
            let newH = img[i].width / (naturalW / naturalH);
            console.log(newH);
            img[i].style.height = newH + 'px';
            console.log(img[i].style.height);
        });
    }
};

参考： AJAX loaded images not displaying properly in Safari

【讨论】：