So implementieren Sie das Loader-Widget in Magento2

Ich möchte das Loader-Widget in Magento 2 implementieren. In meinem Formular habe ich eine Schaltfläche platziert

<div style="display:inline; float:right;  width:100%; margin-bottom:5px;">
    <button style="" class="scalable go" type="submit" id="button1"><span>Do some action</span></button>
</div>

Wenn ich auf diese Schaltfläche klicke, möchte ich die URL (frontName / Controller / Action) aufrufen. Während dieser Aktion möchte ich das Loader-Widget anzeigen.

Es ist beeindruckend einfach, wenn es in einer JS-Datei verwendet wird, die über Require JS geladen wurde (Alle / die meisten Ihrer Skripte sollten so sein, dass ich darauf nicht näher eingehen werde):

 $('body').trigger('processStart');

Und um es zu entfernen

$('body').trigger('processStop');

Ergebnis:

Magento2 hat ein Loader-Widget .

Einfache Verwendung mit Ajax-Anfrage.

$.ajax({
    ...// ajax setting,
    showLoader: true, // enable loader
    context: jqueryElementorSelector // element that will be coverer by loader, default body, optional
}).than(...)

Sie können es auch selbst verwenden

<div data-role="pannel" data-mage-init='{"loader": {}}'>
     content
</div>

und in JS

$('[data-role="pannel"]').trigger('show.loader'); // or .mage('loader', 'show')
....
$('[data-role="pannel"]').trigger('hide.loader'); 

Ich denke, Sie möchten Loader bei einem Nicht-Ajax-Anruf anrufen

Temporäre Lösung: Sie können sie beim Senden oder bei jedem anderen Ereignis verwenden: $ ('body') .loader ('show');

https://minhducnho.wordpress.com/2016/11/23/magento2-show-default-loader-in-magento/

Aber ich denke, dies ist keine magento-Methode, um das Loader-Widget bei einem Nicht-Ajax-Aufruf aufzurufen. Ich hatte das gleiche Problem und implementierte es daher als temporäre Lösung.

Eine einfache Möglichkeit, das Ladesymbol in Magento mithilfe des Skripts anzuzeigen:

So zeigen Sie den Lader an:

jQuery('body').loader('show');

oder verwenden:

var body = $('body').loader();
body.loader('show');

oder

$('body').trigger('processStart');

So verstecken Sie den Lader:

var body = $('body').loader();
body.loader('hide');

ODER

jQuery('body').loader('hide');

ODER

jQuery('body').loader('destroy');

ODER

var body = $('body').loader();
body.loader('destroy');

ODER

$('body').trigger('processStop');