网站预加载器 jQuery答案

【问题标题】：Website preloader jQuery网站预加载器 jQuery
【发布时间】：2017-02-20 09:33:17
【问题描述】：

我正在制作一个网站，但我遇到了问题。或者更确切地说，我不知道如何解决空白页问题。

我正在做一个网站，如果你向右滑动，一些数据会插入到数据库中，然后网页会刷新。刷新后，显示一个空白页面，然后是正常的网页，所有的都是 html。

如何在 DOM 准备好之前将加载器图像放在空白页面上？我正在使用 jquery 和 jquery mobile。

网页是这样的：http://meetmean.comxa.com/KlausApp/home.php。如果您向右或向左滑动，它会显示一个警告框，然后页面将刷新。我希望之后显示的空白页是加载图像。

【问题讨论】：

标签： javascript jquery html jquery-mobile preloader

【解决方案1】：

我遇到了同样的问题，我的解决方案是：我覆盖了（你所说的空白）HTML 页面，它具有全屏黑色背景和 div 中的 css 动画，当页面使用 JavaScript 完全加载时我隐藏了该 div

window.onload = function () { $('body').toggleClass('loaded'); };

当您的 html 正文中的所有内容完全加载时，此函数将运行。此代码将添加一个名为加载到您的 html 正文的类，在我的 style.css 文件中，加载的类将隐藏全屏 div。这是在您的页面中拥有加载器的方法之一，这取决于您，有很多方法可以做到这一点。

【讨论】：

【解决方案2】：

获取一个 SVG 动画文件并将其保存在页面中您想要显示的任何位置。以前保持其显示属性无 ..如果您使用 (jQuery) AJAX（即$.ajax()）来获取数据，您可以使用 AJAX 选项中的 on complete 回调函数在动画到来时淡出 SVG。

function ajaxCall(){
    $("#svg").fadeIn("slow");  
    $.ajax({url: "demo_test.txt", complete: function(result){
        $("#svg").fadeOut("slow");
    }});
}

这里，只要调用该函数，SVG 动画就会出现。一旦 AJAX 得到响应，SVG 就会淡出。您可以从http://loading.io获取加载动画

【讨论】：

【解决方案3】：

您可以使用此页面中的一些加载器：https://demos.jquerymobile.com/1.2.0/docs/pages/loader.html

【讨论】：