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

【问题标题】：load background image before other graphics在其他图形之前加载背景图像
【发布时间】：2011-12-14 11:25:50
【问题描述】：

我真的很想在页面内的图片之前加载背景图片。

请参阅：http://carolineelisa.com/boy/animation/，我希望在动画 gif 之前加载纸质图像。

这可以通过 CSS 来实现，还是可以通过一些 Javascript 或 jQuery 来实现？

谢谢！

【问题讨论】：

标签： css image load background-image

【解决方案1】：

当然：这不是万无一失的，在某些浏览器中结果可能会有所不同，但在大多数情况下应该会提供令人满意的结果。

<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>

【讨论】：

酷！谢谢亚伦，它似乎对我有用。你有没有机会指出我在一行中设置图像源的正确方向？现在我有：$("#cloud1").attr('src', 'cloud1.gif'); $("#cloud2").attr('src', 'cloud2.gif'); $("#dolphin1").attr('src', 'dolphin1.gif'); $("#dolphin2").attr('src', 'dolphin2.gif'); 但显然我想指定图像 id 加上“.gif”作为源......
您可以尝试使用每个源字符串创建一个数组（例如：srcArray[]），然后在$('.imgClass').each(function(index)) 中设置this.src = srcArray[index];。您只需要确保您的数组的顺序与您的 each() 迭代的顺序相对应。

【解决方案2】：

考虑在文档准备好后将动画 GIF 添加到 DOM 中。

【讨论】：

这并不一定意味着背景 (css) 图像已完成加载（或完全加载）。使用图像的加载（到所述资源）可以确保浏览器缓存已启动，但还有其他假设和问题。