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

Question

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

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

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

最好的问候,Aart

........

编辑:

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

我将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'/> 

Answer 1

如果图像是img元素:

display

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

有一点需要注意(我忽略了); 某些浏览器甚至不会尝试加载图像,如果它的none属性是opacity.这就是此方法使用该img属性的原因.