在加载新图像时替换div上的背景图像而不让它没有背景

Question

我正在开发一个 phonegap 应用程序，它会在每个页面上显示随机背景图像。

基本上是这样（咖啡脚本）

img = Math.floor Math.random() * 16
elem.css 'background-image', "url(img/backgrounds/#{img}.jpg)"

每次页面变化

问题是它在加载新图像之前删除了旧图像，同时让页面没有背景。

我该如何解决这个问题？

（我已经尝试过预加载图片）

Answer 1

感谢此链接How can I check if a background image is loaded?，感谢@Joel Brewer，我设法找到了解决方案

使用answer给出的plain解决方案解决了暂时缺少os背景图片的问题，但延迟仍然存在，非常烦人。

而且我认为既然它是一部手机，它不会让我预先缓存一堆大图像（即使不是这样，我也不应该那样做）

所以，基本上，我所做的只是预缓存下一张图片，coffeescript 中的解决方案如下：

# The class
class ImageLoader
  constructor: (@src_gen) ->
    @precache_obj = $ '<img style="position: absolute; top: -9999px"/>'
    $('body').append @precache_obj
    @precache()

  precache: ->
    @precache_src = @src_gen()
    @precache_obj.attr 'src', @precache_src

  get_image_src: ->
    src = @precache_src
    @precache()
    src


# The initialization
Layouts.background_loader = new ImageLoader ->
  img_n = Math.floor Math.random() * 16
  "img/backgrounds/#{img_n}.jpg"

# The call
random_background: (elem) ->
  elem.css 'background-image', "url(#{Layouts.background_loader.get_image_src()})"