Bloc de l'INTERFACE utilisateur de la filature de préchargement

Je me demandais si quelqu'un pourrait faire un aperçu de la façon dont je pourrais ajouter une filature de préchargement (comme apple l'utilise) à l'aide de jQuery Bloc UI plugin. Le preloader aurait à tourner jusqu'à ce que l'AJAX chargement du contenu. Est-ce possible avec le Bloc de l'INTERFACE utilisateur?

N'importe quelle direction serait utile, merci!

OriginalL'auteur Chad | 2011-05-16

  1. 17

    Trouver un bon animé throbber image sur le web, comme ceci:
    Bloc de l'INTERFACE utilisateur de la filature de préchargement

    Configurer un caché throbber div montrer.

    <div id="throbber" style="display:none;">
    <img src="/img/busy.gif" />
</div>

    Dire blockUI à utiliser que les div que le message.

    $.blockUI({ message: $('#throbber') });

    Après l'appel ajax est terminée, tuer le throbber:

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

    Vous pouvez également utiliser ajax de succès ou d'erreur de rappels au contrôle blockUI différemment sur chaque résultat, au lieu de remplir.

    OriginalL'auteur mujimu

  2. 2

    Oui, c'est possible. Vous pouvez ajouter un pré-loader sur votre site web dans le style que vous souhaitez à l'aide de ce site...

    http://www.preloaders.net/

    Mise à JOUR:

    Voir ce pour plus de détails...

    https://stackoverflow.com/questions/6014386/can-anyone-recommend-an-asp-net-busybox-control/6014442#6014442

    merci pour le lien, je pense plus comme un personnalisé écrit à l'aide de jQuery Bloc de l'INTERFACE utilisateur

    OriginalL'auteur Naveed Butt

  3. 2

    J'ai pris la réponse fournie par mujimu et correction d'un léger problème avec elle. J'ai de multiples usages, de la "throbber" qui se passe simultanément. Ce que j'ai trouvé que ça ferait désordre et le throbber serait d'arrêter de travailler, si j'ai tiré avant un existant avait été débloqué.

    C'est ma solution ...

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

    Ce ajaxLoaderPath est fourni par mon cshtml pour contourner des problèmes avec des répertoires virtuels.

    OriginalL'auteur Antony Scott

  4. 0

    Je déteste l'introduction d'une autre bibliothèque pour juste une fonction, j'ai donc mis en œuvre un moi-même, avec un peu de jQuery, JavaScript et Bootstrap 3.

    Lorsque j'appuie sur un bouton, mon code ajoute un blocage modal à une table, fait un appel ajax, et attend 0,5 secondes, puis débloque, afin de montrer la filature gif(car il peut être trop rapide pour avis). Merci pour @NaveedButt, j'ai trouvé https://icons8.com/preloaders/ pour générer un gif avec de la couleur du thème de mon site.

    Throbber modal: (gif centrée horizontalement et verticalement)

    <div id="throbber" class="modal" role="dialog" style="display:none; position:relative; opacity:0.6; background-color:white;">
    <img style="margin: 0 auto;
                position: absolute;
                top: 0; bottom: 0; left:0; right:0;
                margin: auto;
                display: block;
               " src="/static/images/spinning.gif" />
</div>

    Le bouton:

    <div class="row">
    <div class="col-lg-12">
        <div class="pull-right">
            <button type="button" id="reload" class="btn btn-primary pull-right-button" style="width: 120px;">Reload</button>
        </div>
    </div>
</div>

    JavaScript + jQuery:

    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

    });
});

    Le résultat final est:

    Bloc de l'INTERFACE utilisateur de la filature de préchargement

    OriginalL'auteur WesternGun