After loading a javascript function on my page, I wanted to add a loading icon to show the user that something was happening. The loading icon worked initially, but disappeared as soon as the page finished loading and did not reappear during subsequent reloads.
I needed the loading icon to only hide after the page had completely reloaded.
Below is the snippet of code I used:
<script type="text/javascript>
$(document).ready(function () {
(function () {
if (window.localStorage) {
if (!localStorage.getItem('firstLoad')) {
localStorage['firstLoad'] = true;
window.location.reload();
}
else
localStorage.removeItem('firstLoad');
$("#loaderbox").hide();
}
})();
});
</script>Here is the code for the loader icon:
<div id="loaderbox">
<div class="loader_bg"></div>
<div class="loder_in">
<div class="loader_wrapper">
<div class="preloader-wrapper big active" style="width:102px;height:102px;">
<div class="spinner-layer spinner-blue-only">
<div class="circle-clipper left">
<div class="circle"></div>
</div>
<div class="gap-patch">
<div class="circle"></div>
</div>
<div class="circle-clipper right">
<div class="circle"></div>
</div>
</div>
</div>
<div class="im_wrapper" style="left:6px;"><img src="/static/images/key.png" alt=""></div>
</div>
</div>