Priorisierung von window.load-Funktionen

Question

Entschuldigung, wenn dies eine noob Frage ist (ich bin ein JS noob). Ich arbeite an einer Website, auf der die Homepage aus einem Preloader und einer Slideshow besteht.

Ich habe es geschafft, sowohl den Preloader als auch die Diashow einzurichten. Allerdings habe ich festgestellt, dass beide gleichzeitig geladen werden. Ich muss einen Weg finden, zuerst den Preloader zu laden und nach dem Vorladen die Diashow zu starten.

Ich benutze (Fenster) .Load auf beiden Funktionen, aber ich würde gerne wissen, ob es eine Möglichkeit gibt, zu priorisieren, wie Bereiche geladen werden.

Hier ist meine Arbeitscode:

jQuery(window).load(function() { 

    jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow"); 

    setTimeout(wptime_plugin_remove_preloader, 3000); 
    function wptime_plugin_remove_preloader() { 
    jQuery('#wptime-plugin-preloader').remove(); 
    } 

}); 

jQuery(window).load(function() { 

    $('#slideshow.royalSlider').royalSlider({ 
    arrowsNav: true, 
    loop: true, 
    keyboardNavEnabled: true, 
    controlsInside: false, 
    imageScaleMode: 'fill', 
    arrowsNavAutoHide: false, 
    autoScaleSlider: false, 
    numImagesToPreload: 0, 
    transitionSpeed: 600, 
    thumbsFitInViewport: false, 
    navigateByClick: false, 
    startSlideId: 0, 
    transitionType:'fade', 
    globalCaption: false, 

    }); 

}); 

Grüße,

Johann

Answer 1

Sie sie beide in einem einzigen jQuery(window).load kombinieren können, und wählen Sie die royalSlider Setup-Funktion innerhalb der wptime_plugin_remove_preloader Funktion auszuführen, nachdem die preloader Entfernung:

jQuery(window).load(function() { 
    //set up the preloader 
    jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow"); 

    setTimeout(wptime_plugin_remove_preloader, 3000); 

    function wptime_plugin_remove_preloader() { 
     //Remove the preloader 
     jQuery('#wptime-plugin-preloader').remove(); 

     //Set up the slider after removing the preloader 
     $('#slideshow.royalSlider').royalSlider({ 
     arrowsNav: true, 
     loop: true, 
     keyboardNavEnabled: true, 
     controlsInside: false, 
     imageScaleMode: 'fill', 
     arrowsNavAutoHide: false, 
     autoScaleSlider: false, 
     numImagesToPreload: 0, 
     transitionSpeed: 600, 
     thumbsFitInViewport: false, 
     navigateByClick: false, 
     startSlideId: 0, 
     transitionType:'fade', 
     globalCaption: false, 

     }); 
    } 
}); 

Answer 2

die preloader auf window.onload aktivieren und rufen Sie die Diashow-Funktion aus dem Inneren der Preload-Funktion (Hinweis: Ungeprüfte) :

jQuery(window).load(function() { 

    jQuery('#wptime-plugin-preloader').delay(500).fadeOut("slow"); 

    setTimeout(wptime_plugin_remove_preloader, 3000); 
    function wptime_plugin_remove_preloader() { 
    jQuery('#wptime-plugin-preloader').remove(); 
    } 
slideshow(); 
}); 

function slideshow() { 

    $('#slideshow.royalSlider').royalSlider({ 
    arrowsNav: true, 
    loop: true, 
    keyboardNavEnabled: true, 
    controlsInside: false, 
    imageScaleMode: 'fill', 
    arrowsNavAutoHide: false, 
    autoScaleSlider: false, 
    numImagesToPreload: 0, 
    transitionSpeed: 600, 
    thumbsFitInViewport: false, 
    navigateByClick: false, 
    startSlideId: 0, 
    transitionType:'fade', 
    globalCaption: false, 

    }); 

} 

Answer 3

Setzen Sie Ihren Code, der die Diashow insi lädt

de

function wptime_plugin_remove_preloader() { 
     jQuery('#wptime-plugin-preloader').remove(); 
     //slideshow code here 
    } 

$(window).load würde für die Seite warten alle Elemente zu laden, die Sie brauchen für Ihre Javascript, zu arbeiten, weil Sie die Elemente, um sicherzustellen, haben Sie verweisen bereits in Ihrem Code in das DOM existieren. Um Chain-Funktionen aufrufen jede nächste Funktion aus dem letzten Block des einen vorhergehenden