在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上替換背景圖片而不讓它在沒有背景的情況下加載新圖片

回答

相關問題