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

【问题标题】：Load javascript animation ONLY when entire site (images) loaded仅在加载整个站点（图像）时加载 javascript 动画
【发布时间】：2023-03-09 21:56:01
【问题描述】：

我正在构建这个严重依赖“重”图像和动画的热门网站。

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

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

更新：

$.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);

    });

【问题讨论】：

window.onload = function() {}

标签： javascript jquery animation jquery-animate

【解决方案1】：

使用

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

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

然后，您需要在加载时隐藏您的网站内容。如果您将所有内容都放在一个 DIV 中，您可以使用“可见性：隐藏”来切换它的可见性。您不应该使用“display: none”，因为对于某些浏览器（如果我没记错的话，Opera），它们不会加载没有显示值的内容。

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

附带说明，您不应该使用 jQuery.ready() 函数，正如 RobG 所指出的那样，因为它只等待 DOM 加载，而不是图像。

【讨论】：

看起来它正在工作。上线的时候我试试现在，有什么方法可以让我先加载窗帘 + 加载器，然后再开始加载其余内容？

【解决方案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);
});

【讨论】：

【解决方案3】：

将您的处理程序放入window.load。这仅在页面完全加载后触发，包括图形。

$(window).load()

【讨论】：

严格来说，load 事件监听器应该附加到 body 元素，但我不知道附加到 window 会失败。
@RobG，有趣的是，load 上的 jQuery 文档具体描述了 $(window).load()。你可能想看看。
documentation 没有告诉您代码实际在做什么（如果您要引用它们，请包含链接。）。上面将附加一个负载侦听器到window 对象，jQuery 在 every 调用$(<someFn>) 时执行此操作，但在这种情况下，它取决于它。当然，如果你尝试$('body')load(...) 它会失败，但那是 jQuery。
那不是 jQuery，那是 DOM。 load 事件是一个窗口事件，但由于您没有 <window> 元素，因此内部事件处理程序属性被分流到 body 元素。
@RobG：我实际上在我的回答中引用了一个指向 jQuery API 的链接。

【解决方案4】：

使用Prototype的Event.observe like

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

Event.observe 中的函数只有在 DOM 中的所有图片都加载完成后才会被调用。

【讨论】：

问题标记为 jQuery，绝对没有理由为此使用另一个厚实的库。

【解决方案5】：

只需使用：

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

使用 Jquery：

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

【讨论】：

来自jQuery documentation:...$(document).ready() function. Everything inside it will load as soon as the DOM is loaded and before the page contents are loaded，其中 OP 似乎在 load 事件之后。所以不要使用jQuery.ready()。
我做了这个（看代码更新），但它只是同时进行动画+加载
@Vitor Reis 尝试使用 window.onload = function(){}
看起来它正在工作。上线的时候我试试现在，有什么方法可以让我先加载窗帘 + 加载器，然后再开始加载其余内容？