Execute jQuery function after image is downloaded or after some delay

Question

I want to delay this part of jquery code by 2 seconds

//set equal height of two div's
//$(".pg-right-bar").css({ "height": $("#pg-left-bar").height() })
var leftbar = $(".pg-left-bar").height();
var rightbar = $(".pg-right-bar").height()-4; // remove 4 pxels from righ div
leftbar = leftbar - 20;

if (leftbar > rightbar) 
{
    $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() - 10 })
}
else 
{
    $(".pg-left-bar").css({ "height": $("#pg-right-bar").height() })
    $(".pg-right-bar").css({ "height": rightbar+"px" })
}

Actually my page has two divs pg-left-bar div & pg-right-bar div my left bar div has page contents and right bar div has image. and i have to assign both divs same height depending on which one has greater height.

So i use above logic for this but problem with this code is that it executes before right-bar image is downloaded which results in is that most of the time first condition is true. Is there a way i can delay the execution of this code till image in pg-right-bar is downloaded.

or how can i wrap this code in a function with 3 seconds delay.

After trouble shooting i came to conclusion that code logic is fine it is the image which take time to download & in between jquery is executed and assign wrong dimensions to both the div

Complete...

jQuery(document).ready(function () {
    App.init();
    App.initNavMenu();
    //Tabs
    App.InitCustomTabs();
    App.initMarqueeBrands();
    //activatte tooltip
    $('.tooltip').tooltipster();
});

UPDATE

I solved the problem by wrapping the code in following function.

$(window).load(function() {
    var leftbar = $(".pg-left-bar").height();
    var rightbar = $(".pg-right-bar").height()-4; // remove 4 pxels from righ div
    leftbar = leftbar - 20;
    if (leftbar > rightbar) 
    {
        $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() - 10 })
    }
    else 
    {
        $(".pg-left-bar").css({ "height": $("#pg-right-bar").height() })
        $(".pg-right-bar").css({ "height": rightbar+"px" })
    }
});

score 1 · Answer 1 · answered Sep 12 '13 at 11:03

1

The simple code after image is loaded.

var img = $(something_to_find_image)
img.ready(function_to_call_after_load_of_image)

answered Sep 12 '13 at 11:03

Michas

8,534
6
38
62

score 1 · Answer 2 · answered Sep 12 '13 at 11:05

1

Depending on what you want to do:

$(document).ready() is triggered right after the DOM is loaded (images might still be in progress of being loaded)
$(window).load() is triggered after everything (including the images) have been loaded.

I am assuming you want to wait until everything is loaded, so you can use $(window).load(). However, if you want to show a spinning wheel, hourglass etc until all images are loaded, display it inside $(document).ready() and hide it inside $(window).load().

answered Sep 12 '13 at 11:05

Matt

25,467
18
120
187

Actually i did use window.load first for some reason it didnt work. But after further troubleshooting i managed to make it work.. my answer is also pointing to similar reason as mentioned by you. Thanks anyway. Just forgot for a moment basic difference between two. – Learning Sep 12 '13 at 11:08

score 0 · Answer 3 · edited May 23 '17 at 10:25

UPDATE

I solved the problem by wrapping the code in following function.

$(window).load(function() {
            var leftbar = $(".pg-left-bar").height();
    var rightbar = $(".pg-right-bar").height()-4; // remove 4 pxels from righ div
    leftbar = leftbar - 20;

    if (leftbar > rightbar) {
        $(".pg-right-bar").css({ "height": $("#pg-left-bar").height() - 10 })
    }
    else {
        $(".pg-left-bar").css({ "height": $("#pg-right-bar").height() })
        $(".pg-right-bar").css({ "height": rightbar+"px" })
    }
});

Scenario well explained here

score 0 · Answer 4 · answered Sep 12 '13 at 11:06

If you want to execute the code after the images have loaded, setting a 2 second delay is sloppy. It could run too early, or way too late. Using fixed delays to execute code after a event of which the duration isn't fixed should be avoided, instead use:

$(document).ready(function () {
  //code goes here
});

or

$(window).load(function () {
  //code goes here
});

$(document).ready will only be called after the DOM is ready and $(window).load() after everything else is ready (best suits your needs)

score 0 · Answer 5 · answered Sep 12 '13 at 11:08

0

jQuery provides the load() event method that can be used to invoke a function once the window is completely loaded.

jQuery(window).load(function(){
  //your code here
  alert("All the assets of the page have been loaded");

});

answered Sep 12 '13 at 11:08

yb007

1,377
2
11
17

Execute jQuery function after image is downloaded or after some delay

5 Answers5