Ich benutze die load () - Funktion, um Details dynamisch von verschiedenen Seiten abzurufen, indem ich auf die Schaltflächen im Menü klicke. Eine der Schaltflächen verweist auf eine Bildergalerie, die eigene Abfrageeffekte verwendet. Diese Skripte werden jedoch nicht ausgeführt. Ich habe versucht, sie explizit mit getscript () zu laden, aber das funktioniert auch nicht. Hier ist der Code:

$(document).ready(function() {

var hash = window.location.hash.substr(1);
var href = $('#nav li a').each(function(){
    var href = $(this).attr('href');
    if((hash==href.substr(0,href.length-4))&&(hash!='')){
        var toLoad = hash+'.php #content';
        $('#content').load(toLoad);
    }                                           
});

$('#nav li a').click(function(){

    var toLoad = $(this).attr('href')+' #content';
    $('#content').hide();   
    window.location.hash = $(this).attr('href').substr(0,$(this).attr('href').length-4);
    $('#content').load(toLoad,showNewContent());
    function showNewContent() {
        $('#content').fadeIn(1000);
        $.getScript("gallery.js");
    }

    return false;

});

});

Hier ist der Inhalt meiner gallery.js-Datei. Der genaue Effekt ist möglicherweise irrelevant. Ich habe den folgenden Code eingefügt, um die Position meiner Warnmeldungsfelder anzuzeigen:

$(document).ready(function(){
//perform actions when DOM is ready
  var z = 0; //for setting the initial z-index's
  var inAnimation = false; //flag for testing if we are in a animation
  alert("1");
  $('#pictures img').each(function() { //set the initial z-index's    
    z++; //at the end we have the highest z-index value stored in the z variable
    $(this).css('z-index', z); //apply increased z-index to <img>
    alert("2");
  });

  function swapFirstLast(isFirst) {
    if(inAnimation) return false; //if already swapping pictures just return
    else inAnimation = true; //set the flag that we process a image
    var processZindex, direction, newZindex, inDeCrease; //change for previous or next image
    alert("3");
    if(isFirst) { processZindex = z; direction = '-'; newZindex = 1; inDeCrease = 1; } //set variables for "next" action
    else { processZindex = 1; direction = ''; newZindex = z; inDeCrease = -1; } //set variables for "previous" action

    $('#pictures img').each(function() { //process each image
    alert("4");
          if($(this).css('z-index') == processZindex) { //if its the image we need to process
        $(this).animate({ 'top' : direction + $(this).height() + 'px' }, 'slow', function() { //animate the img above/under the gallery (assuming all pictures are equal height)
          $(this).css('z-index', newZindex) //set new z-index
            .animate({ 'top' : '0' }, 'slow', function() { //animate the image back to its original position
              inAnimation = false; //reset the flag
            });
        });
      } else { //not the image we need to process, only in/de-crease z-index
        $(this).animate({ 'top' : '0' }, 'slow', function() { //make sure to wait swapping the z-index when image is above/under the gallery
          $(this).css('z-index', parseInt($(this).css('z-index')) + inDeCrease); //in/de-crease the z-index by one
        });
      }
    });

    return false; //don't follow the clicked link
  }

  $('#next1 a').click(function() {
      alert("5");
    return swapFirstLast(true); //swap first image to last position
  });

  $('#prev1 a').click(function() {
      alert("6");
    return swapFirstLast(false); //swap last image to first position
  });

});
//Function for z-index based gallery ends here

Folgendes habe ich gefunden:

Ich drücke Strg + F5, lade die Seite von Anfang an und klicke auf die Galerie-Schaltfläche. Ich erhalte die Warnung "1". Die Bilder werden geladen, aber die Animation funktioniert nicht.

Ich klicke erneut auf die Galerie-Schaltfläche, ohne zu aktualisieren, und erhalte alle entsprechenden Warnungen von 1 bis 6, und der Effekt wirkt wie ein Zauber.

Wenn der Effekt nicht funktioniert, lege ich einfach den Inhalt von gallery.js in die Chrome-Konsole und klicke auf die Eingabetaste. Der Effekt funktioniert dann wieder einwandfrei.

Es gibt auch Zeiten, in denen die Effekte nicht funktionieren, obwohl die obigen Schritte genau wiederholt wurden. Woran könnte das liegen? Ich habe gehört, dass die Getscript-Methode asynchron ist und ich habe sogar versucht, die Ajax-Synchronisierung zu deaktivieren, aber ich erhalte immer noch unvorhersehbare Ergebnisse.