Fade In Div Nachdem andere Div geladen wurde

Question

Ich versuche in meiner Menüleiste zu verblassen, nachdem ein leeres div geladen wurde (es gibt ein großes Hintergrundbild im leeren div). Dieses Bild braucht ein oder zwei Sekunden, um geladen zu werden. Daher muss das Menü nach dem Laden des Bildes (div) eingeblendet werden.

Hier ist meine Jquery: (. Dokument .ready nicht die richtige Wirkung nicht geben)

$(.top-bg).ready(function() { 
    $(".top-bar").fadeIn(1000); 
}); 

Answer 1

Sie nicht direkt an diesen div tun können.

Erstellen Sie stattdessen ein speicherinternes Bildelement, und legen Sie seine Quelle auf die Quelle des Hintergrundbilds fest;
dann können Sie Ihre Funktion die img ‚s Last Ereignis zuordnen:

$(document).ready(function($) { 
    var img = new Image(); 
    img.src = $('.top-bg').css('background-image').replace(/url\(|\)/g, ''); 

    img.onload = function(){ 
     $(".top-bar").fadeIn(1000); 
    }; 
}); 

Hier ist die Geige: http://jsfiddle.net/BPeG2/

Answer 2

Sie können nicht für eine Load-Ereignis direkt an den div angebracht warten: Sie die stattdessen laden soll Bild bei domready Ereignis und dann das Div selbst verblassen. Beachten Sie auch, dass Sie sollten prüfen, ob das Bild in complete Zustand ist (wenn es bereits zwischengespeichert wird)

versuchen so etwas wie

$(function() { // on dom ready event 

    var div = $(".top-bar"), 
     src = "url-to-your-image", 
     tmp = $('<img />'); 

    tmp.one('load', function() { div.fadeIn(1000) }) /* one: it need to be 
                 executed one time only */ 
     .attr('src', src); 

    if (tmp.get(0).complete) { 
     tmp.trigger('load'); 
    } 
}); 

Answer 3

Try this:

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

    var tmp = $('<img src="relative_path_to_image" />'); 

    tmp.load(function() { 
     $(".top-bar").fadeIn(1000); 
     tmp.remove(); 
    }); 
});