在我手动刷新页面之前，加载功能窗口不会触发？答案

【问题标题】：Window on load function is not firing until i refresh page manually?在我手动刷新页面之前，加载功能窗口不会触发？
【发布时间】：2018-12-14 14:42:06
【问题描述】：

在内容成功加载之前，我会显示一个加载栏。加载后，我通过 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>

【问题讨论】：

这是一个奇怪的问题。您确定加载了正确的 java 脚本。所以不是兑现版什么的。
@MarkBaijens 更改后我每次都刷新缓存
如果从加载 jQuery 的脚本标签中删除 async 会怎样？以前从未见过它，但如果它确实异步加载 jQuery，您的代码在执行时可能无法使用它。虽然这应该在控制台中给出错误。

标签： javascript jquery

【解决方案1】：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：

Nopx，现在它甚至不会在第二次刷新时加载
嗯，你能用$(window)发布结果的截图或视频吗？
是否有聊天的选项，以便我可以分享@peter
如果我没记错的话$(window).on('load') 等待所有内容加载完毕，包括图片和其他内容。
@MarkBaijens 是的，但一切都加载了，加载器仍在旋转，加载事件没有触发！

【解决方案3】：

我希望这与你一起工作，我已经创建了你将使用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');
});

【讨论】：

loadFunction 会在所有内容加载完毕后调用，对吗？
是的，它与<body>标签有关，但它应该在body的顶部
我已经更新了代码，我认为这将与你一起工作，享受@DojoDev
$(document).ready() 与$(window).on('load') 不同
是的，我知道，Check here，他需要在加载内容时分页，所以document.ready 将触摸元素（当 DOM 加载时）然后加载函数，window.load 将加载网页加载，而不是在完成 DOM 树之后