9
votes

Bloc UI Spinning Preloader

Je me demandais si quelqu'un pouvait donner une idée de la manière dont je pouvais ajouter un préchargeur de filature (comme Apple utilise) à l'aide du plug-in JQuery Block UI. Le préchargeur devra tourner jusqu'à la charge du contenu Ajax. Est-ce possible avec le bloc UI?

N'importe quelle direction serait utile, merci!

jquery preload preloader blockui jquery-blockui

0 commentaires

4 Réponses :

2
votes

Oui, c'est possible. Vous pouvez ajouter un pré-chargeur sur votre site Web dans n'importe quel style que vous souhaitez utiliser ce site Web ...

http://www.preloaders.net/

mise à jour:

Voir ceci pour plus de détails ...

https://stackoverflow.com/questions / 6014386 / Can - Toute personne-Recommander-an-ASP-Net-Net-Busybox-Control / 6014442 # 6014442

1 commentaires

Merci pour le lien, je pensais plus comme une personnalisation écrite utilisée à l'aide de l'interface utilisateur de JQuery Block

17
votes

Trouver une bonne image d'animation Throbber sur le Web, comme ceci:

Configurez une franchise cachée Div pour le montrer. P>

$.ajax({
    complete: function(data) {
        // kill the block on either success or error
        $.unblockUI();
    }
});

0 commentaires

2
votes

J'ai pris la réponse fournie par Mujimu et fixé un léger problème avec celui-ci. J'ai plusieurs usages de la "throbber" se produisant simultanément. Ce que j'ai trouvé, c'était que cela gâcherait et que la throbber cesserait de travailler si je le tirai avant qu'un existant n'ait été débloqué.

Ceci est ma solution ... P>

function ReloadDetails(id) {
    $('#' + id + '_Details').block({ message: $('<img src="/images/ajax-loader.gif"/>') });
    $.get(...);
}

0 commentaires

2
votes

Je déteste l'introduction d'une autre bibliothèque pour une seule fonction, alors j'ai implémenté un moi-même, avec juste jQuery, JavaScript et Bootstrap 3.

Lorsque j'appuie sur un bouton, mon code ajoute un blocage modal à une table, Ajax Appel et attend 0,5 seconde, puis débloque, afin de montrer le gif de filature (car il peut être trop rapide à remarquer). Merci pour @naveedbutt, j'ai trouvé https://icons8.com/preloaders/ pour générer un gif avec le Couleur de thème de mon site. p>

Throbber modal: (GIF centré horizontalement et verticalement) p> xxx pré>

function block() {
    var body = $('#panel-body');
    var w = body.css("width");
    var h = body.css("height");
    var trb = $('#throbber');
    var position = body.offset(); // top and left coord, related to document

    trb.css({
        width: w,
        height: h,
        opacity: 0.7,
        position: 'absolute',
        top:        position.top,
        left:       position.left
    });
    trb.show();
}
function unblock() {
    var trb = $('#throbber');
    trb.hide();
}
$(document).ready(function(){
    $('#reload').click(function(){
        block();
        $.ajax({
            type:       "GET",
            url:        "{% url 'scriptsList'%}",
            async:      false
        });
        setTimeout(function(){
            unblock();
        }, 500); //wait 0.5 second to see the spinning gif

    });
});

0 commentaires