无限 ajax 中的图像在 IE 中滚动丢失（除非使用开发工具或放大）

Question

我在 magento 产品列表页面上使用 ajax 无限滚动。它在 Chrome、Firefox 和 Safari 中工作正常，但在 Internet Explorer 中，当它到达下一页时，这些下一组图像丢失并且只出现图像名称（页面前面的图像存在）。我刷新了缓存，确保图像位于路径指向的位置，检查了媒体权限，增加了 php 内存限制，重新编制了索引。

当我打开开发者工具或更改缩放比例时，图像又变魔术了。当到达新页面时，下一组图像只是名称。为什么只有当我缩放或按 F12 开发工具时它才会起作用？控制台或日志中没有错误。

第 1 页总是很好，只是下一页。

Answer 1

因此，IE 不喜欢 list.phtml 文件中的以下内容。

srcset="<?php echo $this->helper('catalog/image')->init($_product,'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize($_imgSize); ?> 1x,

<?php echo $this->helper('catalog/image')->init($_product,'small_image')->constrainOnly(TRUE)->keepAspectRatio(TRUE)->keepFrame(FALSE)->resize(2*$_imgSize); ?> 2x"

我恢复使用 src。

src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>"

Answer 2

您可能会使用不支持浏览器的 picturefill 或 respimage polyfill。

只需将 picturefill 或 respimage 写入您的开发控制台即可。

如果dom中添加了新元素，则需要调用polyfill函数。（picturefill(); 或 respimage();）。

检查你的无限滚动插件，应该有一个事件，一旦添加新元素就会触发。

如果您使用respimage 或picturefill 3.0-beta，您还可以添加mutation plugin。

另一种解决方法是使用 lazySizes，因为 lazysizes 还会自动检测新的图像元素。

无限 ajax 中的图像在 IE 中滚动丢失（除非使用开发工具或放大）

Images missing in infinite ajax scroll in IE (unless dev tools or zoom in use)

internet-explorer

infinite-scroll