未加星标

YouTube like Ajax Loading Bar

字体大小 | |
[前端(javascript) 所属分类 前端(javascript) | 发布者 店小二05 | 时间 2019 | 作者 红领巾 ] 0人收藏点击收藏

Expecting like- http://www.thepetedesign.com/demos/youtube_loadingbar_demo.html

I am working on Ajax loaders, Youtube like ajax loader has impressed me much.

Well before Trying this loader i usually used to load ajax loaders in this way-

Whenever ajax starts, completes- <script type="text/javascript"> $(function () { $('.loader').ajaxStart(function () { $(this).fadeIn(); }).ajaxComplete(function () { $('.loader').fadeOut(); }); $(window).load(function () { $('.loader2').fadeOut(); }); }); </script> HTML- <div class="loader"> <img src="../../Images/AjaxLoader.gif" /></div> <div class="loader2"> <img src="../../Images/AjaxLoader.gif" /></div>

I was using images and showing and hiding them on ajax start and end functions.

Now i wanted to use youtube like loader-

For a simple link it was working fine-

<a id="clickme">Click me</a> <script type="text/javascript"> $(document).ready(function () { $("a").loadingbar({ done:function({}); }); }); </script>

I am not able to use this ajax loader on every ajax start and complete function.

I tried- <script type="text/javascript"> $(function () { $('a').ajaxStart(function () { $(this).loadingbar(); }).ajaxComplete(function () { $(this).loadingbar(); }); }); </script>

I want this ajax loader to appear on every ajax request in application. How can this be done?

You can setup defaults for jQuery ajax calls via $.ajaxSetup

Like so:

$.ajaxSetup({ beforeSend: function() { if ($("#loadingbar").length === 0) { $("body").append("<div id='loadingbar'></div>") $("#loadingbar").addClass("waiting").append($("<dt/><dd/>")); $("#loadingbar").width((50 + Math.random() * 30) + "%"); } }, complete : function() { $("#loadingbar").width("101%").delay(200).fadeOut(400, function() { $(this).remove(); }); } });

Any subsequent $.ajax calls will use those defaults (unless it specifically overrides the values), so a loading bar will show up each time. You can see this in action here: http://jsfiddle.net/QfgJ5/1/

Keep in mind that if you're performing multiple ajax requests at the same time, this will interrupt the loading bar animation. You may want to consider generating a unique loader div for each ajax request.

本文前端(javascript)相关术语:javascript是什么意思 javascript下载 javascript权威指南 javascript基础教程 javascript 正则表达式 javascript设计模式 javascript高级程序设计 精通javascript javascript教程

代码区博客精选文章
分页:12
转载请注明
本文标题:YouTube like Ajax Loading Bar
本站链接:https://www.codesec.net/view/627987.html


1.凡CodeSecTeam转载的文章,均出自其它媒体或其他官网介绍,目的在于传递更多的信息,并不代表本站赞同其观点和其真实性负责;
2.转载的文章仅代表原创作者观点,与本站无关。其原创性以及文中陈述文字和内容未经本站证实,本站对该文以及其中全部或者部分内容、文字的真实性、完整性、及时性,不作出任何保证或承若;
3.如本站转载稿涉及版权等问题,请作者及时联系本站,我们会及时处理。
登录后可拥有收藏文章、关注作者等权限...
技术大类 技术大类 | 前端(javascript) | 评论(0) | 阅读(63)