4

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,
    $el;

$pageWrap.height($pageWrap.height());
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) {
        $mainContent
            .fadeOut(200, function() {
                $mainContent.hide(function() {
                    $(".loader").show();
                    var page = newHash.replace(/\..+$/, '');
                    var page = page.replace(/!/, '');
                    var data = 'page=' + page;
                    $.ajax({
                            url: "main_content/action.php", 
                            type: "POST",       
                            data: data + "&request=ajax",
                            cache: false,
                            success: function (html) {

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

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

                                        });
                                    //});

                              }
                        });

                    });

                });


    };

});

$(window).trigger('hashchange');

});

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.

Any suggestions? Thanks

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.

3
  • 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.
    – adeneo
    Aug 28, 2012 at 9:06
  • uhm i tried with $("<img>").on('load', function() { but it doesn't work either
    – g0dl3ss
    Aug 28, 2012 at 9:26
  • That's because you just created an empty image tag ?
    – adeneo
    Aug 28, 2012 at 11:24

1 Answer 1

5

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.

Thanks for the replies

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.