jQuery ajax geladene Inhalte in div -, event bereit

Ich bin dynamisch laden von Inhalt in eine Seite mit jQuery, Ajax. Der Inhalt besteht aus Bildern, so muss ich wissen, an welchem Punkt alle Bilder geladen werden, so etwas wie das DOM Bereit.

Erstmal Inhalte ausgeblendet werden. Nachdem die Bilder wurden erfolgreich geladen ich die div, die Sie enthalten. Gibt es eine Methode um zu erkennen, wenn der geladene Inhalt mit Ajax für die Darstellung bereit ist? Ajax success Funktion wird aufgerufen, wenn die text-Antwort zurückgegeben vom server, aber ich muss eine Funktion ausführen, wenn alles geladen und die Bilder werden geladen.

  • Es ist unklar, was Sie gefragt haben. Fragen Sie, wenn die Inhalte, die Sie auf Anfrage per Ajax zurückgegeben wurde oder du fragst, wenn Bilder, die Sie in Ihr Dokument eingefügt werden jetzt alle geladen?
  • Ich bin gefragt, wenn Bilder, die ich eingefügt haben, in meinem Dokument sind alle geladen.
  • Bitte Bearbeiten Sie die Frage zu sein, viel mehr darüber im klaren, dass.
InformationsquelleAutor Marin Bînzari | 2014-03-26
  1. 2

    Wenn Sie zunächst nur einen Haufen HTML-Code in deinem Dokument (mit einigen <img> tags) und Sie wollen wissen, Wann all die neuen Bilder geladen sind, können Sie es so machen. Nehmen wir an, dass der dynamische Inhalt war alles eingefügt in die #root Objekt. Rechts, nachdem Sie Sie eingefügt haben, den dynamischen kämpfen, können Sie diesen code ausführen:

    function notifyWhenImagesLoaded(rootSelector, callback) {
    var imageList = $(rootSelector + " img");
    var imagesRemaining = imageList.length;

    function checkDone() {
        if (imagesRemaining === 0) {
            callback()
        }
    }

    imageList.each(function() {
        //if the image is already loaded, just count it
        if (this.complete) {
            --imagesRemaining;
        } else {
            //not loaded yet, add an event handler so we get notified
            //when it finishes loading
            $(this).load(function() {
                --imagesRemaining;
                checkDone();
            });
        }
    });
    checkDone();
}

notifyWhenImagesLoaded("#root", function() {
    //put your code here to run when all the images are loaded
});

    Rufen Sie diese Funktion, nachdem Sie Sie eingefügt haben dynamische Inhalte. Es findet alle Bilder-tags in der dynamischen Inhalte und überprüft, ob bereits geladen haben. Wenn Sie haben, es zählt. Wenn Sie dies nicht, dann installiert er ein load-Ereignishandler und es wird benachrichtigt, wenn das Bild geladen. Wenn das Letzte Bild fertig geladen ist, ruft Sie den callback.

    InformationsquelleAutor jfriend00
  2. 0

    ajax

    $.ajax({
    type: "POST",
    url: "myfile.*",
    data: {data : params}, 
    cache: false,
    success: function(return_data){
       //here you have the answer to Ajax
       //at this point you have the content ready for use
       //in your case here you would find the images that you got back from the file called by ajax
    }
});
    • Wenn es ausgelöst wird der event-Erfolg bedeutet, dass die Datei aufgerufen wurde, zurück zu den angeforderten Daten, und sind somit "ready" für den Einsatz. Vielleicht habe ich die Frage falsch verstanden
    • Die Frage ist unklar. Ich habe einen Kommentar gepostet um Klärung bitten. Deine Antwort zeigt nur eine typische ajax-call. Der OP will offensichtlich etwas mit Bildern in der dynamisch geladenen Inhalt, aber es ist nicht ganz klar, was Sie wollen.
    • Ich weiß, wie man ein Ajax-call. Ich brauche ein Ereignis, wie den DOM Bereit.
    • ja, ich weiß. Ich habe meine eigene Antwort, um zu zeigen, wie Sie. Ich bin nicht derjenige, der schrieb diese Antwort.
    • Sorry. Der erste Teil war für Nicolo.
    InformationsquelleAutor WhiteLine
  3. 0

    können Sie die Methode auf mit laden.
    Zählen Sie, wie viele Einträge Sie insgesamt und verwenden Sie das Ereignis load, um eine Anzahl der geladenen Bilder. Sie können sogar ein progress-bar wie dieser.

    Sowas und nachdem Sie fertig sind mit der ajax-Aufruf

    $('img').on('load', function(){

  //Count items here      

});
    InformationsquelleAutor MentalRay
Schreibe einen Kommentar