Alex Lorimer
Alex Lorimer

Reputation: 23

Loader still showing after page has fully loaded

I have a loader that is meant to stop showing after a page has fully loaded. But when I refresh or return to a page on my website it will sometimes show and not hide (even though the page has loaded). I've tried to put a delay in just in case this happens, but still no luck. Anyone have any ideas? Code below and a link to my website www.droolstudios.co.uk

<div id="loader" class="loader-content">
    <div class="column">
        <div class="loader-container  animation-4">
            <div class="shape shape1"></div>
            <div class="shape shape2"></div>
            <div class="shape shape3"></div>
            <div class="shape shape4"></div>
        </div>
    </div>
</div>

<script>

    $(window).on('load', function () {
        $("#loader").hide();

        setTimeout(function () {
            $("#loader").hide()
        }, 5000);
    });

</script>

Upvotes: 0

Views: 1372

Answers (1)

cursorrux
cursorrux

Reputation: 1456

Hide loader on load of specific element!!

Solution 1:

<div id="main-div">
    <!-- content -->
</div>

<script>

    $('#main-div').ready(function () {
        $("#loader").hide();
    });

</script>

Hide loader on $(document).ready

Solution 2:

<script>

    $(document).ready(function () {
        $("#loader").hide();
    });

</script>

Upvotes: 1

Related Questions