javascript - 延迟加载背景图像/淡入替换背景图像

Question

我正在构建一个使用 Maximage jquery 插件来运行背景图像幻灯片的网站。由于图像的大小，我决定尝试实现一种延迟加载方法，该方法将用后台下载的更高质量的图像替换较低质量的图像。

代码可以工作，但问题是，当 maximage 幻灯片的 background-image src 更改为指向更高质量的图像时，会出现明显的闪烁。

我不知道如何解决这个问题，有没有办法用 fadeIn 替换 div 的背景图像？

感谢您的帮助。

Answer 1

您可以这样编写吗:一旦高质量图像加载完成，而不是替换低质量图像，而是将高质量图像作为隐藏的 DIV 或类似的东西插入到 DOM 中。

然后，当您淡入高质量包装 DIV(即同步动画)时，淡出低质量包装 DIV 作为动画完成的回调，分离/隐藏低质量 DIV。不过，这可能仍然会导致某些浏览器/设备中出现闪烁，我必须设置一个演示或其他东西才能看到。