10

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

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

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

6 回答 6

7

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

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

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

如果 JavaScript 被禁用，那应该会正常加载图像，但假设它已启用，则仅在加载后才显示它。

需要注意的一件事（我忽略了）：如果图像的display属性是none. 这就是该方法使用opacity属性的原因。

于 2012-04-04T15:03:21.163 回答
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，请尝试调整压缩。

于 2012-04-04T15:02:38.553 回答
1

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

仅当图像准备好时，使用“image.onload”才会启动您的代码

于 2012-04-04T15:02:21.773 回答
1

如果没有 javascript，您将无法拥有事件，因此您将无法知道图像是否已加载，至少在第一次渲染时是这样。

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

于 2012-04-04T15:03:34.937 回答
1

您可以为图像设置一个变量，并在加载时将其设置为主体背景：

var my_bg = new Image();
my_bg.src = "url(mybackground.png)";
document.style.backgroundImage = my_bg;
于 2012-04-04T15:04:57.757 回答
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，则 bg 将正常加载。如果是，它会显示在最后

于 2012-04-04T15:08:59.337 回答