javascript - Ajax 在 Safari 中加载图像时不考虑 srcset

Question

所以我遇到了一个关于 safari 的奇怪问题。我正在为我们公司开发一个新网站，我正在使用 PJAX 加载页面内容。我使用 srcset 属性显示的大多数图像如下面的示例代码:

<img src="/img/projects/{{ post.cover-image }}.jpg" alt="{{ post.title }}"
srcset="/img/projects/{{ post.cover-image }}-400.jpg 400w,
/img/projects/{{ post.cover-image }}-600.jpg 600w,
/img/projects/{{ post.cover-image }}-900.jpg 900w,
/img/projects/{{ post.cover-image }}-900.jpg 1200w,
/img/projects/{{ post.cover-image }}-900.jpg 1800w,
/img/projects/{{ post.cover-image }}-900.jpg 2400w"

sizes = "(min-width: 2400px) 900px,
(min-width: 1800px) 600px,
(min-width: 1200px) 500px,
(min-width: 900px) 500px,
(min-width: 600px) 600px,
(min-width: 400px) 400px" />

请注意，这是使用 jekyll 构建的，因此变量就位。

我在这些图像上使用对象拟合，我意识到它有自己的问题(主要是 IE)，但这是一个不同的话题。正确的图像被拉取并正确显示在 Firefox 和 Chrome 上，无论页面是最初加载的还是通过 PJAX 通过单击链接拉取的。

问题出现在 Safari 上，如果页面是初始加载的页面，图像将正确显示，但是当通过单击链接通过 PJAX 加载页面时，srcset 中的最小图像是正在加载的图像已加载。 看起来 object-fit 在由 PJAX 加载时也可能会中断，但在初始加载时不会。

这是一个页面链接，您可以在其中看到发生这种情况的示例:http://insight.insightcreative.info/work

如果您直接加载页面或硬刷新，图像看起来都很好。但是，如果您通过单击链接离开该页面，然后再次单击工作链接返回该页面，您会突然看到所有图像的质量都很差，并且正在加载 -400(400 像素)仅图像大小的版本。

发生了另一件奇怪的事情，就像在这个页面上:http://insight.insightcreative.info/work/river-valley-bank-50th-anniversary.html是图像只会在页面最初加载时显示。如果您通过链接(它是工作页面上的第一个元素)通过 PJAX 导航到该页面，则图像甚至不会显示。

起初我认为这些问题可能会发生，因为我的 srcset 图像中没有包含 sizes 属性，但是在包含 sizes 属性进行测试后，它们仍然不起作用适本地。我不知道这是否是关于 safari 的 ajax、css 或 html 的问题。

任何人可以提供的见解都非常棒。 再次声明，这些只是我在 Safari 中看到的问题。

编辑

作为图像质量的变通方法，我检查了所有图像并将 srcset 图像从最高质量排在最前面，到最低质量最后。由于 Safari 只查看 srcset 中的第一张图像，它至少给了我一个质量好的图像。我仍然不明白为什么 Safari 在加载 AJAX 时将某些图像设置为 0 的高度，但我会为此提出一个不同的问题。

Answer 1

可以通过在异步加载图像后强制再次解析图像来解决此问题。

在您的 ajax 回调函数中，您可以选择受影响的图像，然后执行如下操作:


$('.post').find('img').each((index, img) => {
img.outerHTML = img.outerHTML;
});

不理想，但至少图像显示正常。