如果浏览器支持 JS，如何显示加载动画答案

【问题标题】：How to show loading animation if browser supports JS如果浏览器支持 JS，如何显示加载动画
【发布时间】：2011-11-26 13:00:48
【问题描述】：

如果浏览器支持 JS，我想显示加载动画。如果 JavaScript 被禁用，那么图像将显示但永远不会被隐藏，在这种情况下。为此，我直接在<body> 标签之后编写了这段代码：

<?php
$results = get_browser();
if ($results["javascript"] == 1) {
echo '<div id="loading"><img src="core/design/img/load/load.gif"/></div>';
}
?>

而我的 js 看起来是这样的

$(window).load(function(){
$('#loading').fadeOut(600); 
});

收到错误消息browscap ini directive not set in。我怎样才能实现我的想法？

【问题讨论】：

您收到该错误消息是因为您没有setup browscap.ini in php.ini。那就是说get_browser() 对于这种事情不可靠。它不测试浏览器功能，它只是根据用户代理字符串在列表中查找它们。它告诉您浏览器是否应该能够做到这一点，而不是它是否能够。几乎今天使用的所有浏览器应该能够使用 JavaScript；但他们中的许多人都将其关闭，get_browser() 会产生误报。
See this answer 了解更多详情。

标签： php javascript

【解决方案1】：

你可以使用：

<body>
//set the div to hidden by default
<div id="loading" style="display:none"><img src="core/design/img/load/load.gif"/></div>
//place this code directly below the loading div, it will run before page/dom is loaded
<script type="text/javascript">
    document.getElementById('loading').style.display = 'block';
</script>
<script type="text/javascript">
    $(function() {
        //this will run after the page has loaded
        $('#loading').fadeOut(600);
    });
</script>
...

如果您想完全按照 aquastyle.az 的方式进行操作（尽管上述解决方案更快），您可以这样做：

<body>
<script type="text/javascript">
    //if JavaScript is enabled, append the loading div to be body
    $('body').append('<div id="loading"><img src="core/design/img/load/load.gif" /></div>');
</script>
<script type="text/javascript">
    $(function() {
        //this will run after the page has loaded
        $('#loading').fadeOut(600);
    });
</script>
...

【讨论】：

但这不是解决方案。加载 div 只会在整页加载后出现。但我想用这个加载 div 隐藏整个加载过程
误解了你想要做什么，我已经更新了我的代码，所以节目将在页面加载之前执行。
我展示的代码将与 aquastyle.az 中的示例一样工作。确保 div 和脚本就在 <body> 标签的下方
aquastyle.az 是我的网站。请注意，加载栏出现之前有很大的延迟

【解决方案2】：

在您的 HTML 中，您可以执行以下操作：

<html class="no-js">
...

然后，一旦页面加载完毕，通过 JavaScript 将 no-js 类替换为 js 类。

$(window).load(function(){
    $('html').removeClass('no-js').addClass('js');
});

最后，在你的 CSS 中，如果浏览器支持 js，则显示加载图像，如果不支持，则隐藏它。

.js #loading {
    display: block;
}
.no-js #loading {
    display: none;
}

这有意义吗？

【讨论】：

如果您使用Modernizr，它会自动将js 类添加到<html> 标记，因此您可以执行这样的操作。

【解决方案3】：

get_browser 函数必须下载适当的 INI 文件并将其包含在您的 PHP.ini 文件中。

与其试图弄清楚用户是否启用了 javascript，不如从渐进增强的角度构建网站，这样它就适用于所有用户，无论他们的浏览器设置如何。

或者，您可以要求 javascript 设置一个 cookie，然后检查该 cookie 是否存在于 PHP 中，这绝不是 100% 万无一失的方法，但可以适用于您的情况。

【讨论】：