The loading screen for my website isn't disappearing
Question
I am loading a large image for the background of my website, so instead of having it messy I decided to add a nice little preloader with CSS and Jquery.
Right inside the <body> tag I have:
<!-- CSS Spinner -->
<div class="spinner-wrapper">
<div class="spinner">
<div class="rect1"></div>
<div class="rect2"></div>
<div class="rect3"></div>
<div class="rect4"></div>
<div class="rect5"></div>
<em class="spinner-text">One moment</em>
</div>
</div>
Then, before the closing </body> tag I have this script:
<!-- Spinner -->
<script>
$(document).ready(function() {
$(window).load(function() {
preloaderFadeOutTime = 500;
function hidePreloader() {
var preloader = $('.spinner-wrapper');
preloader.fadeOut(preloaderFadeOutTime);
}
hidePreloader();
});
});
</script>
When I open the index.html file directly, it works perfectly, but when I was trying to load it on my website ( link ) it just shows the preloader forever.
Interestingly, I've found that if I open the network panel in the developer console, most of the time the preloader works as it is supposed to.
Does anyone know what the heck is going on here?
2 answers
solution1
1 ACCPTED 2017-02-14 19:13:12
尝试在head标签内导入您的jQuery 。
solution2
0 2017-02-14 19:12:04
Adding this attribute (data-cfasync="false") within JS will not work to exclude the script from Rocket Loader. Rocket Loader ignore individual scripts by adding the data-cfasync="false" attribute to the relevant script tag, for example:
<script data-cfasync="false" src="/javascript.js"></script>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.