延迟加载背景图片/淡入淡出替换背景图片

Question

I am building a site which uses the Maximage jquery plugin to run a background image slideshow. Due to the size of the images, I've decided to try and implement a lazyloading approach which will replace the lower quality images with higher quality images which have been downloaded in the background.

The code works, but the issue is that there is a an obvious flash as the background-image src of the maximage slide is changed to point to the higher quality image.

I'm not sure how to solve this problem, is there a way to fadeIn replace the background-image of a div?

Thanks for any help.

Answer 1

Could you write it in such a way that once the high quality image is done loading, instead of replacing the low quality image, insert the high quality into DOM as a hidden DIV or something like that.

Then fade out the low quality wrapper DIV as you fade in the high quality wrapper DIV (ie. simultaneous animations) at as the callback for animation finish, detach/hide the low quality DIV. That might still cause a flicker in some browsers/devices though, I'd have to setup a demo or something to see.