Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
497 views
in Technique[技术] by (71.8m points)

javascript - 当我使用其他方法时,jQuery加载动画未隐藏在页面上,或者显示了延迟(jQuery Loading Animation is not hiding on page is Loaded or shows delay when i use some other approach)

I am using jQuery to a simple task.

(我正在使用jQuery完成一项简单的任务。)

Task is to simply show a loading animation from none progress until page is completely loaded.

(任务是简单地显示从没有进度直到页面完全加载的加载动画。)

The thing i am experiencing is that the animation shows up after 50-75% time and then goes hidden after the page is completely loaded (I am referring it as delay in next parts of question).

(我正在经历的事情是,动画在50-75%的时间后出现,然后在页面完全加载后变得隐藏(我将其称为问题的下一部分中的延迟)。)

Points to note:

(注意事项:)

-> If I put Animation Code in header.php and script in footer.php then the code shows delay(Mentioned).

(->如果我将动画代码放在header.php ,将script放在footer.php那么代码将显示delay(提及)。)

-> If i put both Animation Code and script in header.php the animation never get hidden (Ambiguous to me).

(->如果我将动画代码和script放在header.php则动画永远不会被隐藏(对我来说模棱两可)。)

For both in footer.php it gets hidden but shows delay.

(对于footer.php两者,它都被隐藏,但显示延迟。)

I want to know the reason why my page is doing this behavior, what is the best approach of doing this task.

(我想知道我的页面执行此行为的原因,什么是执行此任务的最佳方法。)

(I know my approach is not the best one since its misbehaving)

((我知道我的方法自行为以来并不是最好的方法))

Note: My main page includes both header.php and footer.php files.

(注意:我的主页同时包含header.phpfooter.php文件。)

My Question ends here.

(我的问题到此结束 。)

This is bootstrap loading animation.

(这是引导加载动画。)

(Working Fine. No problem with it. Just to show)

((工作正常。没问题。只是为了展示))

Animation Code

(动画代码)

<div id="Loading">
    <div class="spinner-border m-5" role="status" >
      <span class="sr-only" >Loading...</span>
    </div>
</div>

And this is what i function i am using for for hiding the animation on page is completely loaded.

(这就是我用来隐藏页面上的动画的功能已完全加载。)

(Also Working Fine. No problem with it. Just to show)

((也可以正常工作。没问题。只是为了展示))

Script

(脚本)

<script>
    $(document).ready(function($) {
        $('#Loading').fadeOut("slow");
    });
</script>
  ask by Rizwan Amjad translate from so

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

Please log in or register to answer this question.

Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...