在其他圖形之前加載背景圖像

我真的很想在頁面內的圖像之前加載背景圖像。在其他圖形之前加載背景圖像

請參閱：http://carolineelisa.com/boy/animation/，我希望在動畫gif之前加載紙質圖像。

這可以通過CSS來實現嗎？或者它會是一點Javascript或jQuery？

謝謝！

2011-12-14 Caroline Elisa

授予：這不是萬無一失，並且在某些瀏覽器中結果可能會有所不同，但在大多數情況下它應該可以提供令人滿意的結果。

<img id="bg_preload" src="path/to/image.jpg" style="position: absolute; top: -9999px;"/> 
<img id="fg_1" class="fg_image" src="" style="visibility: hidden;"/> 
<img id="fg_2" class="fg_image" src="" style="visibility: hidden;"/> 
<img id="fg_3" class="fg_image" src="" style="visibility: hidden;"/> 
<script type="text/javascript"> 
    $('#bg_preload').load(function() 
    { 
     $('.fg_image').each(function() 
     { 
      this.src = 'path/to/image.gif'; 
      this.style.visibility = 'visible'; 
     }); 
    }); 
</script>

來源

2011-12-14 03:00:33 Aaron

酷！謝謝Aaron，它似乎爲我工作。你有什麼機會可以讓我指出將圖像源設置在一行中的正確方向？現在我有： `$（「＃cloud1」）。attr（'src'，'cloud1.gif'）; $（「＃cloud2」）。attr（'src'，'cloud2.gif'）; $（「＃dolphin1」）。attr（'src'，'dolphin1.gif'）; $（「＃dolphin2」）。attr（'src'，'dolphin2.gif'）;` 但很明顯我想指定圖像ID加'.gif'作爲源... – 2011-12-14 03:47:08

考慮在文檔準備好之後將動畫GIF添加到DOM中。

來源

2011-12-14 02:53:43

這並不意味着背景（css）圖像完成加載（或加載）。使用圖像的加載（到所述資源）可以確保瀏覽器緩存已準備好，但是還存在其他假設和問題。 – 2011-12-14 02:55:43

在其他圖形之前加載背景圖像

回答

相關問題