Tyl*_*mer 4 html javascript css safari ajax
因此，关于野生动物园我遇到了一个奇怪的问题。我正在为我们公司开发一个新站点，并且正在使用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），但这是一个不同的主题。无论页面是最初加载的页面还是通过单击链接通过PJAX加载的页面，正确的图像都可以在Firefox和Chrome上正确显示。
Safari出现问题，如果页面是初始页面，则图像会正确显示，但是当通过单击链接通过PJAX加载页面时，srcset中最小的图像就是被加载的图像。看起来当由PJAX加载时，对象适配可能也会断裂，但在初始加载时不会断裂。
这是指向页面的链接，您可以看到此情况的示例：http : //insight.insightcreative.info/work
如果直接加载页面或进行强制刷新，则图像将看起来都很好。但是，如果您通过单击链接离开页面，然后再次单击工作链接返回页面，则会突然发现所有图像的质量都很差，并且正在加载-400（400px）图片的尺寸版本。
发生的另一件奇怪的事情，例如在此页面上：http : //insight.insightcreative.info/work/river-valley-bank-50th-anniversary.html，该图像仅在最初加载页面时才会显示。如果通过链接（工作页面上的第一个项目）通过PJAX导航至页面，则图像甚至不会显示。
起初我还以为这些问题可能发生的，因为我没有足够的尺寸属性包括在我的srcset图像，但在测试他们与包括大小属性之后，他们仍然不正常工作。我不知道这是否是关于Safari的Ajax，css或html的问题。
有人可以提供的任何见解都会很棒。同样，这些只是我在Safari中看到的唯一问题。
编辑
作为解决图像质量的方法，我仔细检查了所有图像，并从最高质量到最低质量对srcset图像进行了排序。由于Safari仅查看srcset中的第一张图像，因此至少为我提供了高质量的图像。我仍然不知道为什么Safari在加载AJAX时将某些图像的高度设置为0，但是对此我会提出另一个问题。
小智 5
通过强制在异步加载图像后再次对其进行解析，可以解决此问题。
在ajax回调函数中，可以选择受影响的图像，然后执行以下操作：
$('.post').find('img').each((index, img) => {
img.outerHTML = img.outerHTML;
});
不理想，但是至少图像可以正确显示。