Jquery ajax, espere a que se carguen las imágenes antes de activar la función

Hi i have a jquery content animation, everything works fine except for the content loading.

$(function() {
var newHash      = "",
    $mainContent = $("#main_content"),
    $pageWrap    = $(".big_col"),
    $main_menu = $("a.main_menu"),
    baseHeight   = 0,

baseHeight = $pageWrap.height() - $mainContent.height();

$("body").delegate("a.main_menu", "click", function() {
    window.location.hash = $(this).attr("href");
    return false;

$(window).bind('hashchange', function(){

    newHash = window.location.hash.substring(1);

    if (newHash) {
            .fadeOut(200, function() {
                $mainContent.hide(function() {
                    var page = newHash.replace(/\..+$/, '');
                    var page = page.replace(/!/, '');
                    var data = 'page=' + page;
                            url: "main_content/action.php", 
                            type: "POST",       
                            data: data + "&request=ajax",
                            cache: false,
                            success: function (html) {

                                        $("#main_content").ready(function() {
                                            //var loaded = 0;
                                    _gaq.push(['_trackPageview', '/it_'+page]);
                                                    $mainContent.fadeIn(200, function() {
                                                    height: baseHeight + $mainContent.height() + "px"
                                                    }, 300);

                                        $('a[href="#' + newHash + '"]').addClass('current');
                                        return false









this is the code, i tried almost everything i read here on stack overflow and other sites but nothing seem to work(the .ready you see in the code i pasted is just the last thing i tried) I tried with .load, bind load, live load, img .lenght, .ready, everything both selecting the images or the whole div but still nothing seems to work.

¿Alguna sugerencia? Gracias

edit the thing is that without any function trigger, the script works just fine. If i use any of those trigger(except for .ready but then it doesn't do what it should) the script stops at that trigger(where i hide the loader) it doesn't go any further.

preguntado el 28 de agosto de 12 a las 10:08

Inserting HTML is'nt asynchronous, and just checking the container will do no good, you'll have to check the images onload handler to see if they are loaded or not. -

uhm i tried with $("<img>").on('load', function() { but it doesn't work either -

That's because you just created an empty image tag ? -

1 Respuestas

Ok i sorted it out. The problem was that i thought jquery was smart enough to think "ok, this buddy has a function that shoots when images are loaded. OFC it will go on even if there're no images inside the content div". Unfortunately it's not like that, if you write an event like

$("#mydiv img").on('load', function(){
alert("images loaded");

the alert will only trigger if there're images inside #mydiv and if the images have been loaded. If #mydiv contains only text, the function won't be triggered either. I solved by adding

if ($("#main_content").find("img").length > 0) {
     $("#main_content img").on('load', function() {

else the normal ajax loading function.

Gracias por las respuestas

Respondido 28 ago 12, 14:08

No es la respuesta que estás buscando? Examinar otras preguntas etiquetadas or haz tu propia pregunta.