预加载器：如何在脚本添加加载的 class 之前设置超时？

Question

我得问问你们，这段代码有什么问题，我为我的网站创建了一个预加载器，但我在 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> 没有收到 class.

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

<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>

希望有人能帮助我，抱歉我的英语不好^^。

Answer 1

如下更改脚本可能会导致问题

<script type="text/javascript">

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

</script>

更新

添加 jquery min js 如果不加载 jquery js <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>

有关详细信息，请查找此 fiddle

希望对您有所帮助。

预加载器：如何在脚本添加加载的 class 之前设置超时？

Preloader: How can I set a timeout before the script adds the loaded class?

html

javascript

indexing

preloader