延迟加载背景图像/ FadeIn替换背景图像

时间:2013-04-09 04:55:07

标签: javascript jquery html lazy-loading

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

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

我不确定如何解决这个问题,有没有办法淡化替换div的背景图像?

感谢您的帮助。

1 个答案:

答案 0 :(得分:0)

你能否以这样的方式编写它:一旦高质量图像加载完成,而不是替换低质量图像,将高质量插入DOM作为隐藏的DIV或类似的东西。

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