Javascript 仅在背景图像已完全加载时加载背景图像？
好吧，这个标题很好地描述了我的问题： 如何在背景图像完全加载后动态加载？有时，我必须使用大到浏览器需要一段时间才能下载的背景。我宁愿“在后台加载”，并让它在完全加载后淡入 我认为使用jQuery是最好的，但如果禁用了JavaScript，我还希望显示我的背景。如果这真的不可能，那就这样吧，但我认为是吗 致以最良好的祝愿， 阿尔特 ........ 编辑： 非常感谢，伙计们！我已经被这个问题困扰了很多年，只是想不出一个好的简单的方法 我将Jeffrey的Javascript解决方案转换为jQuery解决方案，只是因为jQuery内置的fade看起来太棒了 我会把它贴在这里，以防其他人也有同样的问题：Javascript 仅在背景图像已完全加载时加载背景图像？,javascript,jquery,html,background,Javascript,Jquery,Html,Background,好吧，这个标题很好地描述了我的问题： 如何在背景图像完全加载后动态加载？有时，我必须使用大到浏览器需要一段时间才能下载的背景。我宁愿“在后台加载”，并让它在完全加载后淡入 我认为使用jQuery是最好的，但如果禁用了JavaScript，我还希望显示我的背景。如果这真的不可能，那就这样吧，但我认为是吗 致以最良好的祝愿， 阿尔特 ........ 编辑： 非常感谢，伙计们！我已经被这个问题困扰了很多年，只是想不出一个好的简单的方法 我将Jeffrey的Javascript解决方案转换为jQuer
<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'/>
$（文档）.ready（函数（）{
$（'#img'）.css（'opacity'，'0'）.load（function（）{
$（此）。设置动画({
不透明度：1
}, 500);
});
});
使用“image.onload”将仅在映像就绪时启动代码禁用JS时无法启动代码。但是，您可以做的是在CSS中设置背景图像，然后使用以下脚本（假设元素具有ID
myelem编辑：尽管如此，请确保您的背景图像是最佳的。如果它们是PNG，请尝试使用尽可能小的颜色表对它们进行索引，或者如果没有透明度，请确保删除alpha通道。如果是JPEG格式，请尝试调整压缩。如果图像包含
img
document.getElementById（“img”）.style.opacity=“0”；
需要注意的一件事（我忽略了）：如果图像的
displaynone不透明度属性。如果没有javascript，您就无法拥有事件，因此您将无法知道是否加载了图像，至少在第一次渲染时是这样
您也可以使用css预加载（将图像作为背景放在隐藏的div中），但在第一次刷新时效果更好，而不是在加载时效果更好。您可以为图像设置一个变量，加载后，将其设置为主体背景：
var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
您正在寻找的是图像加载方法。如果将图像设置为显示：无，则图像将不可见。要解决可能缺少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>
document.body.style.backgroundImage=“”；
函数changeBackground（）{
document.body.style.backgroundImage=“url（image.png）”；
}
这样，如果未启用javascript，bg将正常加载。如果是，它将显示在结尾我建议你最好的方法是缩小背景图像的大小当然，但有时，这是不可能的。特别是在连接速度较慢的情况下，加载一些图像需要一些时间，即使它们尽可能小。Aart说javascript可能被禁用，所以这些不会工作？啊，我会更改我的答案，等等。谢谢。不透明度修正正是我需要的！用我的jQuery解决方案更新了问题。它使用淡入淡出，而不只是显示。：）此链接已不存在
<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>