........

修改

非常感谢！多年来我一直被这个问题所困扰，只是想不出一个简单易行的方法。

我将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元素中：

<img src="bg.jpg" id="img" onload="this.style.opacity='1'">

<script>
    document.getElementById("img").style.opacity="0";
</script>

如果JavaScript被禁用，那么应该正常加载图像，但只有在加载时才显示它，假设它已启用。

有一点需要注意（我忽略了）：如果某个浏览器的display属性为none，则某些浏览器甚至不会尝试加载图像。这就是为什么这个方法使用opacity属性。

Answer 2

禁用JS时无法执行此操作。但是，您可以做的是在CSS中设置背景图像，然后使用以下脚本（假设元素具有ID myelem）。

(function() {
    var elm = document.getElementById('myelem'),
        url = 'background image URL here';
    elm.style.backgroundImage = "none";
    var tmp = new Image();
    tmp.onload = function() {
       elm.style.backgroundImage = "url('"+url+"')";
       // or insert some other special effect code here.
    };
    tmp.src = url;
})();

编辑：尽管如此，请确保您的背景图像是最佳的。如果它们是PNG，请尝试使用尽可能小的颜色表进行索引，或者确保在没有透明度的情况下删除Alpha通道。如果它们是JPEG，请尝试调整压缩。

Answer 3

检查此页面上的示例： http://www.w3schools.com/jsref/event_img_onload.asp

使用“image.onload”只会在图像准备就绪时启动代码

Answer 4

如果没有javascript，您就无法拥有事件，因此您无法知道图像是否已加载，至少对于第一次渲染而言。

你也可以使用css预加载（将图像作为背景放在隐藏的div中），但这样可以在你第一次刷新时更好，而不是在加载时。

Answer 5

您可以为图像设置变量，加载后，将其设置为正文背景：

var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;

Answer 6

您正在寻找的是onLoad方法的图像。如果您使用display：none设置图像，则不会显示该图像。要解决可能缺少javascript的问题，请执行以下操作：

<body style="background-image:url(image.png);">
<img src="image.png" style="display:none" onLoad="changeBackground();" />
</body>
<script>
document.body.style.backgroundImage = "";
function changeBackground(){
    document.body.style.backgroundImage = "url(image.png)";
}
</script>

这样，如果没有启用javascript，bg将正常加载。如果是，它将显示在最后

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

........

6 个答案: