jQuery Promise Laden einer HTML-Seite nach der anderen

Question

Ich möchte eine HTML-Seite innerhalb einer anderen HTML-Seite mit jQuery Promises laden. Aber konnte nicht laden. Unten ist der Code ..

(function ($) { 
$(document).ready(function() { 

var loadPageLoaded = function(){ return $('div.loadContainer').load('load.html').promise();} 
var loadAwardsPage = function(){ return $('div#maincontainer').load('assets/templates/awards.html').promise();} 


loadPageLoaded().then(loadAwardsPage()); 


}); 
})(jQuery) 

Answer 1

Sie die Versprechen Objekte und $.when() wenn diese Versprechen erfüllt sind, um herauszufinden, verwenden zu speichern. wie in diesem Beispiel

function createPromise(baseInfoTemplate) { 
    var baseData = { /* foobar */ }; 

    return $.Deferred(function(promise) { 
     setTimeout(function() { 
      $('#foo').append('<li>' + baseInfoTemplate + ' --> success</li>'); 
      promise.resolve(); 
     }, ~~(Math.random() * 8000)); 
    }).promise(); 
} 

var myPromises = [ ]; 

myPromises.push(createPromise('some data')); 
myPromises.push(createPromise('even moar data')); 
myPromises.push(createPromise('foo bar heay')); 
myPromises.push(createPromise('hey yooo')); 
myPromises.push(createPromise('who wants some?')); 

$.when.apply(null, myPromises).done(function() { 
    $('#foo').append('<li class="last">all done!</li>'); 
}); 

mit .apply() hier, weil es ein Array als Argument für einen Funktionsaufruf übernimmt. In diesem Fall übergeben wir alle Versprechungsobjekte an .when().

Hier ein BeispielJsFiddle Example

Answer 2

Below-Code für mich gearbeitet, war-Code in Ordnung, aber es war Problem mit der Menge der Zeit, um die erste Seite zu laden genommen. Und die zweite Seite konnte nur nach 2-3 Sekunden geladen werden.

(function ($) { 
    $(document).ready(function() { 

    var loadPageLoaded = function(){ return $('div.loadContainer').load('load.html').promise();} 
    var loadAwardsPage = function(){ 
     var maincontainer = $('div#maincontainer'); 
     return $.Deferred(function(promise) { 
      maincontainer.load('assets/templates/awards.html'); 
      promise.resolve(); 
     }).promise(); 
    } 
    loadPageLoaded().done(function() { 
     setTimeout(function() { 
     loadAwardsPage(); 
     }, 2000) 
    }); 
    }); 
})(jQuery) 

Answer 3

then nimmt Funktionen als Argumente (eine für onResolved, die zweite für onRejected)

Code ausgeführt wird und loadPageLoaded() und loadAwardsPage() ... sofort das Ergebnis (ein Versprechen) übergeben wird, um .then wie es Argument ... aber .then alles ignoriert, die keine Funktion ist - daher

die einfache Lösung, die keinen Fehler ist, die Funktion loadAwardsPage als Argument an .then passieren - dh die ()

entfernen

(function($) { 
    $(document).ready(function() { 
     var loadPageLoaded = function() { 
      return $('div.loadContainer').load('load.html').promise(); 
     } 
     var loadAwardsPage = function() { 
      return $('div#maincontainer').load('assets/templates/awards.html').promise(); 
     } 
     loadPageLoaded().then(loadAwardsPage); 
    }); 
})(jQuery)