在其他图形之前加载背景图像

我真的很想在页面内的图像之前加载背景图像。在其他图形之前加载背景图像

请参阅：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

在其他图形之前加载背景图像

回答

相关问题