CODEWITHSUNDEEP
jqueryajaxloadpriority-queue
g0dl3ss
g0dl3ss

Reputation: 393

Jquery ajax, wait for images to load before firing function

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.

Upvotes: 4

Views: 4878

Answers (1)

g0dl3ss
g0dl3ss

Reputation: 393

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

Upvotes: 5

Related Questions