只有在背景图片完全加载后才加载它吗？

Question

只有在背景图片完全加载后才加载它吗？

javascriptjqueryhtmlbackground

11

如题所述：

如何在完全加载后动态加载背景图片？有时，我必须使用非常大的背景图像，这可能需要一段时间才能下载到浏览器。我宁愿在后台加载它，并在完全加载后让它淡入。

我认为最好使用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'/>

- Aart den Braber

我建议让这个工作起来的最佳方式是减小背景图片的尺寸。 - Manse

1

当然，但有时这是不可能的。特别是在连接缓慢的情况下，即使图像尽可能小，加载某些图像仍需要一些时间。 - Aart den Braber

6个回答

3

当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格式，请尝试调整压缩。

- Niet the Dark Absol

1

你所需要的是一个关于图片加载的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未启用，则背景将正常加载。如果启用了JavaScript，则会在最后显示。

- Zack Newsham

1

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

使用“image.onload”仅在图像准备就绪时启动您的代码。

- Saturnix

此链接已不存在。 - Cos

1

没有 JavaScript 你就无法拥有事件，所以至少在第一次渲染时你将无法知道图像是否已加载。

你也可以使用 CSS 预加载（将图像作为隐藏 div 的背景），但这只适用于第一次刷新而非加载期间。

- Panagiotis

1

你可以将一个变量设置为图片，当它加载完成后，将其设置为页面的背景：

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

- lightningmanic

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Jeffrey Sweeney · Accepted Answer

如果在元素中包含了图像：

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

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

如果JavaScript被禁用，那么这应该能够正常加载图像，但只有在启用JavaScript后才会显示它。

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