Question

在内容成功加载之前，我正在显示加载栏。加载后，我将通过jQuery显示内容，但是当我第一次访问该页面时，加载器将永远显示，并且on load事件不会触发。当我手动刷新页面时会触发。我的代码有什么问题？

事件调用代码：

   $(window).on('load', function(){
            $("#slider-pre-loader").fadeOut("slow");
            $("#video-blog-slider").fadeIn();
   });

动态HTML：

<div id="slider-pre-loader"></div>
<div id="video-blog-slider" style="display: none">
    <div class="blog-category-items blog-page" id="blogIndex">
        <div class="container">
            <?php
            $hpos = 0;
            foreach ($categories as $category):
                $categoryhref = fakeUrl::genSlugFromText($category['name']);
                $listVideos = $category['videos'];
                if (in_array($category['name'], $categoryDisplay)) :
                    ?>
                    <div class="blog-groups">
                        <div class="group-heading">
                            <h3>
                                Test title
                            </h3>
                        </div>
                        <?php if ($category['desc'] != '') :?>
                            <p class="group-desc"><?php echo $category['desc'];?></p>
                        <?php endif;?>
                        <?php
                        $slideClass =  '';
                        if (!$detect->isMobile() && !$detect->isTablet() ) {
                            $slideClass =  'blog-slider';
                        }
                        ?>
                        <div class="<?php echo $slideClass;?> owl-lg-dot mb-none owl-theme owl-loaded" id="videoList">
                            <?php
                            $v = 0;
                            foreach ($listVideos as $video) :
                                $v++;
                                $itemClass = '';
                                if (($detect->isMobile() || $detect->isTablet()) && $v > 5) {
                                    $itemClass = 'item-disable';
                                }

                                $videoSlug = fakeUrl::genSlugFromText($video['title']);
                                ?>
                                <div class="blog-item <?php echo $itemClass;?>">
                                    <div class="blog-image">
                                        <a href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">

                                        </a>
                                    </div>
                                    <div class="caption">
                                        <a class="blog-list-video-title" href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">

                                        </a>
                                    </div>
                                    <div class="blog-metas">
                                        <small class="blog-views"><?php echo number_format($video['views']); ?> views</small>
                                    </div>
                                </div>
                            <?php

                            endforeach;
                            ?>
                        </div>
                    </div>
                <?php
                endif;
            endforeach;
            ?>
        </div>
    </div>
</div>

将jQuery放在事件调用之前：

<script src="//code.jquery.com/jquery-1.11.3.min.js" async></script>

Answer 1

$(window)选择器用于选择视口，而$(document)选择器用于整个文档（即<html>标记内的内容）。尝试使用以下内容：

$(document).on('load', function(){
        $("#slider-pre-loader").fadeOut("slow");
        $("#video-blog-slider").fadeIn();
});

Answer 2

希望与您一起工作，我创建了一个示例，您将与document.ready一起使用，这意味着JQuery可以查看并关注网页here is fiddle

中的所有元素

简单的测试

<div id="slider-pre-loader">no</div>
<div id="video-blog-slider" style="display: none">
  hi
</div>

或您的代码

<div id="slider-pre-loader">no</div>
<div id="video-blog-slider" style="display: none">
    <div class="blog-category-items blog-page" id="blogIndex">
        <div class="container">
            <?php
            $hpos = 0;
            foreach ($categories as $category):
                $categoryhref = fakeUrl::genSlugFromText($category['name']);
                $listVideos = $category['videos'];
                if (in_array($category['name'], $categoryDisplay)) :
                    ?>
                    <div class="blog-groups">
                        <div class="group-heading">
                            <h3>
                                Test title
                            </h3>
                        </div>
                        <?php if ($category['desc'] != '') :?>
                            <p class="group-desc"><?php echo $category['desc'];?></p>
                        <?php endif;?>
                        <?php
                        $slideClass =  '';
                        if (!$detect->isMobile() && !$detect->isTablet() ) {
                            $slideClass =  'blog-slider';
                        }
                        ?>
                        <div class="<?php echo $slideClass;?> owl-lg-dot mb-none owl-theme owl-loaded" id="videoList">
                            <?php
                            $v = 0;
                            foreach ($listVideos as $video) :
                                $v++;
                                $itemClass = '';
                                if (($detect->isMobile() || $detect->isTablet()) && $v > 5) {
                                    $itemClass = 'item-disable';
                                }

                                $videoSlug = fakeUrl::genSlugFromText($video['title']);
                                ?>
                                <div class="blog-item <?php echo $itemClass;?>">
                                    <div class="blog-image">
                                        <a href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">

                                        </a>
                                    </div>
                                    <div class="caption">
                                        <a class="blog-list-video-title" href="/blog/<?php echo $videoSlug; ?>" title="<?php echo $video['title'];?>">

                                        </a>
                                    </div>
                                    <div class="blog-metas">
                                        <small class="blog-views"><?php echo number_format($video['views']); ?> views</small>
                                    </div>
                                </div>
                            <?php

                            endforeach;
                            ?>
                        </div>
                    </div>
                <?php
                endif;
            endforeach;
            ?>
        </div>
    </div>
</div>

Javascript：

$(document).ready(function() {             
   $("#slider-pre-loader").fadeOut('slow');
   $("#video-blog-slider").fadeIn('slow');
});

Answer 3

除非您确实需要异步加载脚本文件，否则请不要在async标签上放置script属性。现在，您的“ jQuery”代码正在异步加载，即，当您尝试附加事件时，很可能没有加载jQuery。

在手动刷新后第二次运行的唯一解释是浏览器正在“同步”加载缓存的资源。不同的浏览器执行此操作的方式不同，因此您可能会在其中看到不一致的行为。

只需删除async属性，您就应该每次看到事件触发。

直到我手动刷新页面后，加载窗口功能才会触发？

3 个答案: