javascript – 仅在完全加载时加载背景图像？

好吧,标题几乎描述了我的问题：

如何在完全加载后动态加载背景图像？有时,我必须使用如此大的背景,以便浏览器下载它可能需要一段时间.我宁愿“在背景中加载它”并让它在满载时淡入.

我认为jQuery最好是使用,但我也希望我的背景出现,如果JavaScript被禁用.如果真的不可能,那就这样吧,但我认为是这样吗？

最好的祝福,
阿尔特

……..

编辑：

谢谢你,伙计们！多年来我一直被这个问题所困扰,只是想不出一个简单易行的方法.

我将Jeffrey的Javascript解决方案转换为jQuery解决方案,因为jQuery的内置淡入淡出看起来非常棒.

我会在这里发布,以防其他人有同样的问题：

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js'></script>
<script type='text/javascript'>
    $(document).ready(function() {
        $('#img').css('opacity','0').load(function() {
            $(this).animate({
                opacity: 1
            },500);
        });
    });

</script>

<img src='yourimage.jpg' id='img'/>

解决方法

如果图像是img元素：

< img src =“bg.jpg”id =“img”onload =“this.style.opacity ='1'”/>
<脚本>的document.getElementById( “IMG”)style.opacity = “0”;.< /脚本>

如果Javascript被禁用,那应该正常加载图像,但只有在加载时才显示它,假设它已启用.

有一点需要注意(我忽略了);如果某些浏览器的显示属性为none,则它们甚至不会尝试加载图像.这就是为什么这个方法使用opacity属性.