Window on load function is not firing until i refresh page manually?

Question

I'm showing a loading bar before the content loads successfully. And after load I am displaying the content by jQuery but when i visit the page first time the loader is showing forever and the on load event isn't firing. It fires when i manually refresh the page. What's wrong with my code?

Event call code:

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

Dynamic 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 placed before event call:

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

It's a weird problem. Are you sure the correct java script is loaded. So not a cashed version or something. — Mark Baijens, Dec 14 '18 at 15:07
What if you remove `async` from the script tag that loads jQuery? Never seen it before, but if it does load jQuery asynchronous your code might not have it available when it gets executed. Although that should give errors in the console. — Mark Baijens, Dec 14 '18 at 15:24

score 0 · Answer 1 · answered Dec 14 '18 at 14:43

0

The $(window) selector is for selecting the viewport whereas the $(document) selector is for the entire document (that is, what's inside the <html> tag). Try using the following:

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

answered Dec 14 '18 at 14:43

Peter

624
1
8
24

Nopx, now it even doesn't load on 2nd refresh – DojoDev Dec 14 '18 at 14:50
Hmm, could you post a screenshot or video of the result with `$(window)`? – Peter Dec 14 '18 at 14:51
Is there an option for chatting so that i can share @peter – DojoDev Dec 14 '18 at 14:53
If i'm not mistaken `$(window).on('load')` waits for all content to be loaded, including images and stuff. – Mark Baijens Dec 14 '18 at 14:58
@MarkBaijens yap but everything loads and still the loader is spinning and on load event is not firing! – DojoDev Dec 14 '18 at 14:59
@DojoDev is there a reason why you are using a very old version of jQuery? – Peter Dec 14 '18 at 15:01
Yes all scripts are based on this version. I even tried new version for this page bt still same results. – DojoDev Dec 14 '18 at 15:16

Moumen Soliman · Answer 2 · 2018-12-14T15:09:05.740

I hope this working with you, I have created example you will be woking with document.ready it means JQuery see and focus on all elements in your web page, here is fiddle

Simple for test

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

OR your code

<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 will be called when everything is loaded right? — DojoDev, Dec 14 '18 at 14:56
Yup, its related to `` tag, but it should be in the top of body — Moumen Soliman, Dec 14 '18 at 14:59
I've updated code I think this one will working with you, enjoy @DojoDev — Moumen Soliman, Dec 14 '18 at 15:03
`$(document).ready()` does not do the same as `$(window).on('load')` — Mark Baijens, Dec 14 '18 at 15:10
Yup I know, [Check here](https://stackoverflow.com/questions/588040/window-onload-vs-document-onload), He needs to page on load content, so `document.ready` will touch the elements (when DOM load) and then loading the function, `window.load` will load with webpage load, not after finish DOM tree — Moumen Soliman, Dec 14 '18 at 15:13
@MoumenSoliman still same effect. I need to refresh page 2nd time otherwise loader continues to spin. — DojoDev, Dec 14 '18 at 15:14

score 0 · Accepted Answer · answered Dec 14 '18 at 15:28

Don't place async attribute on your script tags unless you really need your script file to be loaded asynchronously. Right now, your 'jQuery' code is being loaded asynchronously, i.e. jQuery is most probably not loaded when you are trying to attach your event.

The only explanation for it working the second time upon manual refresh is that the browser is 'synchronously' loading the cached resource. Different browsers do this differently, so you can expect inconsistent behaviour there.

Just remove the async attribute, and you should see your event firing every time.

Window on load function is not firing until i refresh page manually?

3 Answers3