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

时间:2011-12-14 02:47:23

标签: css image load background-image

我真的想在页面中的图像之前加载背景图像。

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

这可以通过CSS实现,还是有点Javascript或jQuery?

谢谢!

2 个答案:

答案 0 :(得分:1)

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

答案 1 :(得分: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>