在div上替换背景图片而不让它在没有背景的情况下加载新图片

我正在开发一个在每个页面上显示随机背景图像的phonegap应用程序。在div上替换背景图片而不让它在没有背景的情况下加载新图片

基本上它（的CoffeeScript）

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

每次页面变化

时间的问题是，它的新图像加载之前，让页面背景不同时删除旧的图像。

我该如何解决这个问题？

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

来源

2014-08-31 Pedro Bernardes

可能重复吗？ http://stackoverflow.com/questions/5057990/how-can-i-check-if-a-background-image-is-loaded – 2014-08-31 23:02:52

你可以在页面加载之前在服务器端做到这一点吗？ – TimSPQR 2014-09-01 02:24:09

TimSPQR - 没有服务器端！这是手机！ – 2014-09-03 19:39:36

由于此链接How can I check if a background image is loaded?，以@Joel布鲁尔我设法找到一个解决方案

使用简单的解决方案给出答案上解决了感谢临时缺乏背景图像的问题，但延迟仍然存在，非常烦人。

而且我觉得既然是手机，它不会让我预先缓存一堆大图像（即使它是不是这样的，我不应该这样做）

所以，基本上，我所做的只是预先准备下一张图片，解决方案如下：

# 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()})"

来源

2014-09-03 19:44:31

在div上替换背景图片而不让它在没有背景的情况下加载新图片

回答

相关问题