Question

嘿，我有以下代码在body标签中设置和缩放背景图像...

html,body {

    margin:0;
    padding:0;
    height:100%;
    background-image:url(some image);
    background-size:100% 100%;
    -webkit-background-size:100% 100%;        /*  Safari  */
    -khtml-background-size:100% 100%;         /*  Konqueror  */
    -moz-background-size:100% 100%;          /*  Firefox  */
    background-repeat:no-repeat;
    background-attachment:fixed;
    overflow:hidden;

}

我想要做的是在身体中的图像完成加载时或者当整个页面完成加载时显示警告..但是，我发现了这个fiddle和{{3}在网上，但它并不适合我的情况。感谢。

Answer 1

如果您正在使用jquery，则等待整个页面加载，然后运行代码：

$(window).load(function() {
    alert( "css and graphic is loaded." );
});

背景图片上没有加载事件，但有一个插件可以检测到它们： https://github.com/alexanderdickson/waitForImages

你也可以解决这个类似的问题： How can I check if a background image is loaded?

Answer 2

$(window).load(function() {
 alert("Css has been loaded/ Loaded");
});

在所有css和js代码完全执行后执行。

Answer 3

试试这个。加载完所有内容后，此事件将触发

$(window).load(function() {
 alert('loaded')
});

顺便说一句，你可以优化你的CSS

html,body {
    margin:0;
    padding:0;
    height:100%;;
    background-size:100% 100%;
    -webkit-background-size:100% 100%;        /*  Safari  */
    -khtml-background-size:100% 100%;         /*  Konqueror  */
    -moz-background-size:100% 100%;          /*  Firefox  */
    background: url(someImage) no-repeat fixed;  
    overflow:hidden;
}

Answer 4

您可以使用imagesloaded jQuery插件执行此操作，只需添加

即可

$('body').imagesLoaded(function(){ alert('LOADED'); });

这适用于身体内的所有图像加载时。

DEMO

在身体背景图像完成加载时显示警报

4 个答案: