entrée en fondu uniquement superposition div une fois que tous les éléments sont chargés?

Question

Toutes mes excuses à la paresse dans ma requête, vont essayer d'être plus précis. OK- Comment puis-je modifier le code ci-dessous afin de garantir que le fadeIn ne démarre qu'après que toutes les autres actions ont été effectuées et que toutes les images du html ont été chargées? Aurai-je besoin de charger les images via js avec un rappel sur chacun? Une partie du code dans une $ (fenêtre) .load(). au lieu de document prêt?

Au moment où le fadeIn est appelé de manière asynchrone (je devine) - parfois, il se fane .ovwrapper quand une image est toujours en chargement. ce qui suit est dans un document prêt en tête du html chargé par le script ajax.

//Reset overlay elements 
    $("#ov-image1"+bellcat).show(); 
    $("#ov-image2"+bellcat).hide(); 
    $("#ov-image3"+bellcat).hide(); 
    $("#ov-video"+bellcat).hide(); 
    $("#ovtext"+bellcat).hide(); 
    $("a#clicktxt").removeClass("highlight"); 
    $("a#clickimg1").addClass("highlight"); 
    $("a#clickimg2").removeClass("highlight"); 
    $("a#clickimg3").removeClass("highlight"); 
    $("a#clickvid").removeClass("highlight"); 
    //Fade in overlay inner wrapper 
    $(".ovwrapper").fadeIn("slow"); 
    //Resize 1st image in relation to height of image-wrapper 
    $(function(){ 
    var wh = $(window).height(); 
    var hh = $("#ovheader-wrapper"+bellcat).height(); 
    var nh = $("#ovfooter-wrapper"+bellcat).height(); 
    var ch = wh - (hh + nh); 
    $("#ovslideshow"+bellcat).css("height", ch+"px"); 
    }); 

solution proposée:

Ma solution a été d'utiliser le plugin jquery onImagesLoad. Le rappel de ceci cache le gif de chargement, puis s'estompe dans la classe .ovwrapper. Le (la « visibilité », « visible ») cacher() bit est parce que je avais besoin de visibilité:. Caché que je suis de déconner avec la position de l'image et l'échelle avant de disparaître dans la superposition terminée:

$(function(){ 
      //attach onImagesLoad to the entire body 
      $('.ovslideshow').onImagesLoad({ 
       selectorCallback: selectorImagesLoaded 
      }); 
      //the selectorCallback function, invoked once when all images contained within $('body') have loaded 
      function selectorImagesLoaded($selector){ 
       //note: this == $selector. $selector will be $("body") in this example 
       $("#loading").hide(); 
       $('.ovwrapper').css('visibility','visible').hide().fadeIn('slow'); 
      } 
    }); 

effet fini est ici: http://www.andrewstonyer.co.uk/test/index.html

Answer 1

Toutes les fonctions d'animation de jquery sont dotées d'une fonctionnalité de rappel, ce qui vous permet de chaîner l'événement. Reportez-vous cette http://api.jquery.com/show. Vous pouvez écrire quelque chose comme $ ("# ov-image1" + bellcat) .show ('lent', function() {$ (". Ovwrapper"). FadeIn ("lent");});

Answer 2

Définissez un événement de chargement sur toutes les images. Avoir la fonction de rappel incrémenter une variable de comptage, et si le nombre est assez élevé, démarrer le fondu.