Question

I am utilizing jquery to populated some divs with images. When I click on a jstree node, the divs should populate. It works but sometimes my calls to images are coming back empty eventhough there are images in the directory.

Here is a piece of code that shows what I am doing:

}).bind("select_node.jstree", function (event, data) {

var ImgTeamA;
ImgTeamA = "img/"+node_id+"-teamA.png";
myImg1 = new Image;
myImg1.src=ImgTeamA

alert(myImg1.width);
alert(myImg1.src)

$("#div1").html(myImg1).css("border","1px solid");

The problem is this. Eventhough myImg1 exists in img directory, alert(myImg1.width) sometimes shows is as 0. When I click on the node again, div1 shows the image. It is sporadic. Sometimes single click shows the image, sometimes I have to double click the node. Can anybody give me some pointers how to tackle this problem.

Answer 1

You can’t get the width of the image before it’s loaded in the browser, try something like:

}).bind("select_node.jstree", function (event, data) {
    var myImg1 = new Image;
        myImg1.src = "img/"+node_id+"-teamA.png";
        myImg1.onload = function() {
            alert(myImg1.width);
            alert(myImg1.src);
        }

    $("#div1").html(myImg1).css("border","1px solid");
});