Question

我正在构建这个热点，它严重依赖于“重'图像和动画。

它有一些“窗帘”覆盖所有的网站，然后我想打开这些窗帘（动画，已经编码），但只有当我的所有网站（特别是图像）被加载。

还想创建一个简单的加载器（根本没有进展，只说“加载”）;

更新：

$.ready(function() {
            $("#loading").fadeOut();
            $(".leftcurtain").stop().animate({ width: '374px', left: '-60px' }, 6200);
            $(".rightcurtain").stop().animate({ width: '374px', right: '-60px' }, 6200);

            $(".leftback").stop().animate({ width: '60px' }, 6500);
            $(".rightback").stop().animate({ width: '60px' }, 6500);

    });

Answer 1

使用

window.onload = function() {
    // initialize site
};

会工作吗？一旦嵌入到网站中的所有内容（HTML，CSS，图像......）完成加载，它就会触发。

然后，您需要在加载时隐藏您的网站内容。如果您将所有内容放在DIV中，则可以使用“visibility：hidden”切换其可见性。您不应该使用“display：none”，就像某些浏览器一样（如果我能记得正确的话，Opera），它们不会加载没有显示值的内容。

然后，您应该能够在页面顶部放置包含“正在加载”内容的DIV，然后只需关闭它的显示，或者在加载页面后将其从DOM中删除。

作为旁注，你不应该像RobG所指出的那样使用jQuery.ready（）函数，因为它只等待加载DOM而不是图像。

Answer 2

尝试合并jQuery的ready和load

$(document).ready(function()
{
    var images = $('img');
    var loadedImgs = [];
    images.each(function()
    {        
        $(this).load(function() //image load callback
        {        
            loadedImgs.push('');
        });
        // we are interested only if the images is loaded,
        // so we need to place something in the loadedImgs array;
    });
    var interval = setInterval(function()
    {
        if(loadedImg.length == loadedImgs.length)
        {
            clearInterval(interval);
           //your code here ... images were loaded !!!
        }
    },10);
});

Answer 3

将处理程序放在window.load内。只有在页面完全加载后才会触发此操作，包括图形。

$(window).load()

Answer 4

使用Prototype的Event.observe之类的

Event.observe(window, 'load', function()
    {
        //add javascript script tags to the document here
    }

只有在加载DOM中的所有图像后才会调用Event.observe中的函数。

Answer 5

只需使用：

window.onload = function(){
    // javascript code will be executed only after the whole dom is loaded
}

使用Jquery：

$.ready(function(){
    // some code
});

仅在加载整个站点（图像）时加载javascript动画

5 个答案: