Question

所以我遇到了一个关于野生动物园的好奇问题。我正在为我们公司开发一个新网站，并且我使用 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中的最小图像是正在已加载。当PJAX加载时，看起来像对象也可能会破坏，但初始加载时不会。

以下是指向该页面的链接，您可以看到这种情况的示例：http://insight.insightcreative.info/work

如果您直接加载页面，或者在硬刷新时，图像看起来都很好。但是，如果您通过单击链接离开页面，然后再次单击工作链接返回到该页面，您将看到所有图像突然质量非常差，并且正在加载-400（仅400px）尺寸版本的图像。

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

起初我认为这些问题可能正在发生，因为我的srcset图片中没有包含尺寸属性，但在测试它们并包含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; });

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

Answer 2

我似乎遇到了很多问题，Safari在加载AJAX时正确显示我的图像。我发现所有这些问题的根源来自于在图像上使用srcset属性。出于某种原因，使用具有srcset属性的AJAX加载图像会破坏图像的显示方式，并且只会查看属性中的第一个图像。

我已经向Apple提交了一个错误报告，并且很想知道在Safari中调用AJAX时是否有其他人可以确认srcset打破了。

Answer 3

我可以确认Safari（开发者预览版）在使用AJAX加载时，将srcset属性的图像设置为宽度和高度0。在我进行AJAX调用之前，srcset图像在页面上看起来很好。然后图像似乎只是消失了，虽然我可以在网络检查器中看到它们很好（将它们悬停在检查器中的srcset链接上，显示宽度和高度为0 x 0，括号中的正确自然高度）。

更改CSS min-width和min-height，甚至直接在img标记上添加width =和height =都无法解决问题。调整页面大小不会改变这种情况;图像继续不显示。唯一的“修复”不是使用srcset;一旦我回滚到简单的img标签，AJAX就会以适当的宽度和高度加载我的图像。

Answer 4

我将“ img”标签更改为“ picture”，并且可以正常工作：

<picture>
   <source srcset="image_big.jpg" media="(min-width:1200px)">
   <source srcset="image_medium.jpg 992w" media="(min-width:992px)">
   <img src="image_small.jpg" alt="Agilis">
</picture>

代替：

<img srcset="image_small.jpg 530w,image_medium.jpg 992w,image_big.jpg" />

Safari中的Ajax加载图像不尊重srcset

4 个答案: