Question

大家好，这个脚本（Niklaus Gerber）有效，但有一个问题。一旦我设置它，它从CSS样式开始，用div覆盖整个页面。然后，脚本会发现完全加载的站点，但是，它还会锁定具有禁用JavaScript（无限加载）的浏览器。

有人可以帮助我解锁这些用户，通过更改此脚本或建议我对这些人更友好吗？（它还没有在线）。

代码是：

    $(window).load(function() {
        $('#status').fadeOut();animation
        $('#preloader').delay(350)\.fadeOut('slow');
        $('body').delay(350).css({'overflow':'visible'});
    })

对于HTML：



<div id="preloader">

    <div id="status">&nbsp;</div>

</div>

CSS：



body {

    overflow: scroll;
}

#preloader {

    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
    background-color:#fff;
    z-index:99;
}

#status {

    width:200px;
    height:200px;
    position:absolute;
    left:50%;
    top:50%;
    background-image:url(../img/status.gif);
    background-repeat:no-repeat;
    background-position:center;
    margin:-100px 0 0 -100px;
}

提前感谢任何消化。

Answer 1

尝试这个非常简单的解决方案

在你的js中添加$('body').addClass('jsSupport');

并且在您的css中默认隐藏预加载器，因此当没有JavaScript时它将不会显示在屏幕上。

#preloader{
  display:none;/*hide when no js*/
}

当存在JavaScript时，您可以使用额外的css类在屏幕上显示它。

.jsSupport #preloader {

    display:block;/*show when js is supported*/
}

您可以在此处查看我如何设置代码

Demo

您可以在此处停用浏览器的JavaScript以进行测试

Full screen demo

如何改进PreLoadMe脚本以支持禁用JavaScript的浏览器？

1 个答案: