文章/答案/技术大牛

发布

社区首页 >问答首页 >预加载器:如何在脚本添加加载类之前设置超时？

问预加载器:如何在脚本添加加载类之前设置超时？
EN

Stack Overflow用户

提问于 2017-01-05 09:25:22

回答 1查看 3.7K关注 0票数 0

我不得不问你们，这段代码出了什么问题，我为我的网站创建了一个预加载器，但是我在javascript上失败了：

    <!-- script for preloader -->
    <script type="text/javascript/jquery">
        $(document).ready(function() {
            setTimeout(function() {
                $('body').addClass('loaded')
            }, 1500);
        });
    </script>

    <!-- preloader* -->
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-one"></div>
        <div class="loader-section section-two"></div>
    </div>

因此，只要<body>标记获得class="loaded"，预加载器就会停止。但出于某些原因，<body>没有接收该类。

我不知道这是否有帮助，但这是整个文件：

<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <?= $view->render('head') ?>
    <link href="packages/pagekit/theme-hello/css/theme.css" rel="stylesheet">
    <?php $view->script('theme', 'theme:js/theme.js') ?>
    <?php $url = $_SERVER['REQUEST_URI']; if($url == "/arn_architekten/bilderbuch"): ?>
        <style type="text/css">
            html {
                background-color: #000 !important;
                background-image: none !important;
            }
        </style>
    <? endif ?>
</head>    

<body>

    <!-- Render logo or title with site URL -->
    <a href="<?= $view->url()->get() ?>">
        <?php if ($logo = $params['logo']) : ?>
            <img src="<?= $this->escape($logo) ?>" alt="">
        <?php else : ?>
            <?= $params['title'] ?>
        <?php endif ?>
    </a>

    <!-- Render widget position -->
    <?php if ($view->position()->exists('sidebar')) : ?>
        <?= $view->position('sidebar') ?>
    <?php endif; ?>

    <!-- script for preloader -->
    <script type="text/javascript/jquery">
        $(document).ready(function() {
            setTimeout(function() {
                $('body').addClass('loaded')
            }, 1500);
        });
    </script>

    <!-- preloader* -->
    <div id="loader-wrapper">
        <div id="loader"></div>
        <div class="loader-section section-left"></div>
        <div class="loader-section section-right"></div>
    </div>        

    <!-- Render content -->
    <?= $view->render('content') ?>

    <!-- Insert code before the closing body tag  -->
    <?= $view->render('footer') ?>

</body>
</html>

希望有人能在那里帮助我，并为我糟糕的英语表示歉意。

javascript

html

indexing

preloader

回答 1

Stack Overflow用户

回答已采纳

发布于 2017-01-05 09:34:18

按下面的方式更改脚本可能会引起问题

<script type="text/javascript">

$(document).ready(function() {
  setTimeout(function() {
    $('body').addClass('loaded');
  }, 1500);
});

</script>

更新

添加jquery -如果您不加载jquery，<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>，将这一行添加到函数的顶部或head标记中，这是一个问题。

更新1更新头部标记如下所示

<head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <?= $view->render('head') ?>
        <link href="packages/pagekit/theme-hello/css/theme.css" rel="stylesheet">
//add below line 
        <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
        <?php $view->script('theme', 'theme:js/theme.js') ?>
        <?php $url = $_SERVER['REQUEST_URI']; if($url == "/arn_architekten/bilderbuch"): ?>
            <style type="text/css">
                html {
                    background-color: #000 !important;
                    background-image: none !important;
                }
            </style>
        <? endif ?>
    </head>

有关更多信息，请查找此小提琴

希望能帮上忙。

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/41481267

复制

相似问题

问预加载器:如何在脚本添加加载类之前设置超时？
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预加载器:如何在脚本添加加载类之前设置超时？EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问预加载器:如何在脚本添加加载类之前设置超时？
EN