Question

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

基本上它（coffeescript）

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，我设法找到了解决方案

使用答案上给出的简单解决方案解决了临时缺少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()})"

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

1 个答案: