Home > Developer > Web Develop
Webpage loading progress page and loading progress page
Recently, When I was developing a report, the page was slow because a report was a transaction flow meter, So I thought to add a page before it was displayed, tells the user that the page is being loaded to improve friendliness.
After searching a lot of information on the Internet, I decided to use pace. js control, pace. js is very easy to use. You only need to call several APIs. It also provides a lot of css effects for you to choose from. You have tested it in a local test project and it is indeed available. Most of the online tutorials recommend pace. start and pace. done to complete the call. However, I found that the example provided by pace contains a simpler call method. The Code is as follows:
Use pace. start and pace. done method, which must be in document. call pace in ready. start, in window. call pace in onload. done, because I am not very familiar with jQuery, I found a document on the Internet that can be implemented through js. the ready code is as follows:(function () { var ie = !!(window.attachEvent && !window.opera); var wk = /webkit\/(\d+)/i.test(navigator.userAgent) && (RegExp.$1 < 525); var fn = []; var run = function () { for (var i = 0; i < fn.length; i++) fn[i](); }; var d = document; d.ready = function (f) { if (!ie && !wk && d.addEventListener) return d.addEventListener('DOMContentLoaded', f, false); if (fn.push(f) > 1) return; if (ie) (function () { try { d.documentElement.doScroll('left'); run(); } catch (err) { setTimeout(arguments.callee, 0); } })(); else if (wk) var t = setInterval(function () { if (/^(loaded|complete)$/.test(d.readyState)) clearInterval(t), run(); }, 0); };})();However, after such a good method is migrated to a specific report environment, an error is reported, prompting pace. one method in js cannot be used. Because the framework of the report system used and the essence of pace are not very clear, and there is not much energy to study this, we have to give up. However, it is actually a good thing to give up, because after careful consideration, I found that my requirement is only to tell the customer that my page is being loaded and that no detailed progress is needed, in fact, you can first point the report page to a load page, which does nothing, only displays a load GIF image, and then configure onload in the body. The Code is as follows:<body onLoad="location.href='url'">In this way, after this report is selected, the load page is displayed first. After the real report page is loaded, the load page is automatically overwritten. Although this method cannot accurately display the page loading progress, it is easy to use and adaptable, so you do not need to consider the compatibility between the framework and the browser.
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
