Reputation: 23
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
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