jquery some url calls are empty

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.

You can't compute the width of an image until [it is fully loaded in the DOM.](http://stackoverflow.com/q/3877027/901048) — Blazemonger, Jul 20 '12 at 13:29

adeneo · Accepted Answer · 2012-07-20T13:43:35.037

0

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");
});

edited Jul 20 '12 at 13:43

answered Jul 20 '12 at 13:29

adeneo

293,187
26
361
361

That's still won't work all the time. [Images that are cached don't trigger the `load` event](http://stackoverflow.com/q/3877027/901048). – Blazemonger Jul 20 '12 at 13:31
@Blazemonger - should be fixable by checking if the image has width. Edited my answer ? – adeneo Jul 20 '12 at 13:33
It uses `new Image`, so it does'nt need to be rendered in the DOM at all, it just needs to be loaded. – adeneo Jul 20 '12 at 13:36
Yes, I know -- you can't compute the width of a preloaded image. You have to wait until it's actually rendered on the page. But using the `load` event doesn't work if the image is cached, so you have to use [some clever trickery to detect that instead](http://stackoverflow.com/q/3877027/901048). – Blazemonger Jul 20 '12 at 13:37
@Blazemonger - Why would it need to be rendered on the page. it works just fine without rendering it as long javascripts `new Image` is used, see this [fiddle](http://jsfiddle.net/6bBnP/), and using the native onload function will work everytime in most browsers, the cache problem is in my experience more common with jQuery's load() function and `` elements, which works a little different ??? – adeneo Jul 20 '12 at 13:40
@adeneo, if I put $("#div1").html(myImg1).css("border","1px solid"); this in the your function, it looks like it is working. I have one other question, if you dont mind. I have to have one funtion for each image or how can I use one onload fuction for all images? – Mike Dude Jul 20 '12 at 13:43
As far as I know you can't have one onload function for many images, but you could create a function that iterates and triggers a callback when all images are loaded etc. – adeneo Jul 20 '12 at 13:46
adeneo, [that fiddle](http://jsfiddle.net/6bBnP/) doesn't work in older browsers. I just tried it in IE8, and it only alerted on the initial preload. Once it's cached, the onload never fired. (It did seem to work in IE9, for what that's worth.) – Blazemonger Jul 20 '12 at 13:52
Then try my previous edit, which I removed as I did'nt think it really neccessary. [fiddle](http://jsfiddle.net/6bBnP/1/) ... – adeneo Jul 20 '12 at 13:59
@adeneo, I accepted your answer but I dont thin it is working. – Mike Dude Jul 20 '12 at 16:12
I still see the same behavior, images are sporatically showing – Mike Dude Jul 20 '12 at 16:38

jquery some url calls are empty

1 Answers1