How to easily and quickly put your preloader on the standard AJAX Bitrix?

Introduction

I have been visiting Habr for a long time, but decided on the article just now. And even then, it’s not an article at all, but rather, a note about how to easily and without tension, without editing the kernel and the problems with the Ajax itself, take and replace the standard poor window of the Bitrix preloader with your own HTML / CSS code. Let's get started

Description of the problem

Developers on 1C-Bitrix should know about this problem, and for all uninitiated - I will explain. This CMS uses its custom jquery and ajax in standard templates and components. Documentation is available, but is there anyone willing to study it in order to do some basic things? ..
In principle, if you don’t touch anything in standard templates, the “native” Ajax of the Bitrix doesn’t work well. But if you try to correct something seriously, or do it at all, pull your layout along with your native Ajax - then begin dancing with a tambourine, and such an elementary thing as replacing the default wretched preloader turns into tedious googling and learning code in the CMS core.

The position of TP Bitrix on this subject is generally surprising:

Now, unfortunately, there is no standard way to change the standard preloader

All the most naive and gullible will say “no? Well, ok ... "and they will write their Ajax requests. And we will take and do!

Implementation

The point is simple - the standard Ajax has two functions BX.showWait and BX.closeWait which are responsible for the actions on the page while waiting for a response from the Ajax. We use them to load our own instead of the default preloader.
')
First we find the preloader itself. For example, I liked pure HTML / CSS in the style of Windows 8. Then open the footer.php of our template and enter our code before the tag:

<div id="win8_wrapper"> <div class="windows8"> <div class="wBall" id="wBall_1"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_2"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_3"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_4"> <div class="wInnerBall"></div> </div> <div class="wBall" id="wBall_5"> <div class="wInnerBall"></div> </div> </div> </div> 

I will not insert a long CSS sheet (at the end there will be all sources). Next, we insert a script with calling functions that will load our preloader instead of the standard one:

 var lastWait = []; /* non-xhr loadings */ BX.showWait = function (node, msg) { node = BX(node) || document.body || document.documentElement; msg = msg || BX.message('JS_CORE_LOADING'); var container_id = node.id || Math.random(); var obMsg = node.bxmsg = document.body.appendChild(BX.create('DIV', { props: { id: 'wait_' + container_id, className: 'bx-core-waitwindow' }, text: msg })); setTimeout(BX.delegate(_adjustWait, node), 10); $('#win8_wrapper').show(); lastWait[lastWait.length] = obMsg; return obMsg; }; BX.closeWait = function (node, obMsg) { $('#win8_wrapper').hide(); if (node && !obMsg) obMsg = node.bxmsg; if (node && !obMsg && BX.hasClass(node, 'bx-core-waitwindow')) obMsg = node; if (node && !obMsg) obMsg = BX('wait_' + node.id); if (!obMsg) obMsg = lastWait.pop(); if (obMsg && obMsg.parentNode) { for (var i = 0, len = lastWait.length; i < len; i++) { if (obMsg == lastWait[i]) { lastWait = BX.util.deleteFromArray(lastWait, i); break; } } obMsg.parentNode.removeChild(obMsg); if (node) node.bxmsg = null; BX.cleanNode(obMsg, true); } }; function _adjustWait() { if (!this.bxmsg) return; var arContainerPos = BX.pos(this), div_top = arContainerPos.top; if (div_top < BX.GetDocElement().scrollTop) div_top = BX.GetDocElement().scrollTop + 5; this.bxmsg.style.top = (div_top + 5) + 'px'; if (this == BX.GetDocElement()) { this.bxmsg.style.right = '5px'; } else { this.bxmsg.style.left = (arContainerPos.right - this.bxmsg.offsetWidth - 5) + 'px'; } } 

Well, do not forget to add the CSS styles of your preloader in the standard way - by copying to template_styles.css or by connecting to header.php in a separate file.

We try to click something on the site. Voila - preloader replaced. For a more "correct" method, I would advise you to move the connection in the footer to a separate include area.

Sources on GitHub

Thank you all for your attention!