Question

因此它会加载约16mbs的图片（是的，我很愚蠢。我会尽快对其进行更改，如果有人可以告诉我减少其他操作（例如仅动态加载）大小的方法，如果需要的话，如果存在类似的问题），我将不胜感激。

我使用以下方法为其添加了预加载器：

[html]：

<div class="spinner-wrapper">
    <div class="spinner">
    <div class="dot1"></div>
    <div class="dot2"></div>
    </div>
</div>

并对应[jquery]：

<script>
$(document).ready(function() {
//Preloader
$(window).on("load", function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});</script>

这很好用，但是问题是我有一个Javascript代码来问好！但它只能运行2.8秒。因此，如果加载占用的空间更多，则不会显示。有人可以告诉我如何确保仅在加载完成后才加载。

一吨。

我的网站的代码：

https://github.com/richidubey/365-Days-Of-Art/blob/master/index.html

Answer 1

这可能有效

document.addEventListener('DOMContentLoaded', function() {
    // your code here
}, false);

如果您对纯JavaScript感到满意

Answer 2

我的第一个建议是摆脱“嗨！”消息，因为您已经具有加载程序形式的启动页面。但是，如果您真的想要第二个启动页面，则可以使用JQuery when()方法：

$(window).on("load", function() {
  $.when($('.spinner-wrapper').fadeOut(500)).then(displaySplashPage);
});

这假设displaySplashPage()是显示“嗨！”的功能。消息。

您在这里不需要$(document).ready() 和 window.on("load")。准备好文档等待建立HTML，然后将事件侦听器/函数/等应用于结构。窗口onload等待所有内容加载，然后触发。对于您而言，您正试图等待所有图片加载完毕，因此只需要onload。

您可能需要将所有主要内容的容器设置为opacity: 0，并将其作为opacity: 1的一部分切换到displaySplashPage()。这样可以避免在加载程序上执行.fadeOut()时东西泄漏。

Answer 3

JavaScript版本-加载并呈现所有内容时运行js代码

window.onload = function() {
    alert("page is loaded and rendered");
};

jQuery版本（如果需要，请使用纯JS）

$(window).on('load', function() {
    alert("page is loaded and rendered");
});

您可以尝试以下方法：

<script>
// Preloader
$(window).on("load", function() {
    fadeOutTime = 500;
    sayHelloDuration = 5000;

    function hideSayHello() {
        var sayHello = $('.say-hello');
        sayHello.fadeOut(fadeOutTime);
    }

    function hidePreloader() {
        var preloader = $('.spinner-wrapper');
        preloader.fadeOut(fadeOutTime);
        setTimeout(function() {
            hideSayHello();
        }, sayHelloDuration);
    }
    hidePreloader();
});
</script>

另外，从第83〜87行删除代码：

<script>
$(document).ready(function() {
$('.say-hello').delay(2800).fadeOut('slow');
});
</script>

关于您的网站性能，您现在可以改善很多方面：

在首页上使用较小的缩略图，不要一次加载FULL SIZE图像。 “ 作品展示”部分确实很繁琐，没有实际必要。
对于小屏幕，请尝试合并src设置和较小的图像，对于大屏幕，请合并较大/较重的图像。所有现代的浏览器都支持它，它将提高性能/加载速度。
尝试延迟加载大图片，例如仅当用户向下滚动到他们时才滚动，而不是之前。将其与图像查看器集成可能需要花费一些工作，但它将在初始加载时进一步加快速度。我最喜欢的这个库是https://github.com/aFarkas/lazysizes，但是，您可能会发现其他东西...

与您的原始问题无关，我注意到您的HTML中存在错误-请参见此屏幕截图。您使用哪种代码编辑器？ ~~不是插入空格，而是插入了不好的不可见点符号。~~实际上，它不是不可见点（这是我的编辑器的空格缩进符号），它是由2个长破折号（而不是短破折号或减号），然后打开html注释标记：

仅在预加载器结束后加载jquery事件

3 个答案: