jquery plugin imgpreload
<p>I have asked this question couple times, but non of the suggestions seems to be working. </p>

<p>I am using jstree plugin to build the tree. Based on the node_id, I am trying to load images to some divs. It kinda works but, I am having sporadic image display issues. Sometimes, I have to double click, sometimes single click shows the images.</p>

<p>I tried this:</p>

<pre><code>  img1 = new Image;
  img1.src="teamA.png";

  img2 = new Image;
  img2.src="teamB.png";

      img1.onload = function()
 { 

$("#div1").html(img1;
    }  
</code></pre>

<p>etc, but this is not working. I still see sporadicly images are now showing up on the divs.</p>

<p>I started looking at jquery plugin imgpreload as this:</p>

<pre><code>$.imgpreload(['img1','img2', 'img3','img4','img5','img6'], 
{     

    each: function()     { 

    $(this).data('loaded') 

    $("#div1").html(img1);
}
});
</code></pre>

<p>this does not seem to be working either, any ideas or points?</p>

<p>I have done this: </p>

<pre><code>$(function () {
var myImage1 = new Image();
$(img1)
    .load(function () {
    });


      .attr('src', 'teamA.png');
});
</code></pre>

<p>getting syntax errors. Does this seem ok to you?</p>

<p><strong>* updated *</strong> I modified the code as this:</p>

<pre><code>$(function () { 
    var myImage1 = new Image(); 
    $(myImage1).load(function () 
    {     
    })         
    .attr('src', 'teamA.png');
    alert(myImage1.width);  

    $('#div1').html("myImage1").css({"border": "0", "background": "white"});



}
</code></pre>

<p>Right after the load function, I am doing a:</p>

<p>alert(myImage.width) to see the size of the image, it is coming back at 0, so this does not seem to be working. There is definetely image.</p>

<p><em><strong>update v2</em></strong></p>

<pre><code>  $(function () { 
    var myImage1 = new Image(); 
    $(myImage1).load(function () 
    {     
    alert(myImage1.width);
    $('#div1').html("myImage1").css({"border": "0", "background": "white"});

    })         
    .attr('src', 'teamA.png');
    });
</code></pre>

<p>ok, this code works assuming that the image is there.  But I like to do is if the image is not there, I like to hide that div. I have this code, but it is not working on load event. How can I hide the divs that are empty?</p>

<pre><code>       $(function ()
           { 
            var myImage1 = new Image(); 
             $(myImage1).load(function () 
                  {  
                       var image1Check = myImage1.width;
               if (image1Check == 0  || image1Check &lt; 30) 
                             {
                         $('#div').html("").css("border", "");

                     }
               else 
                     {

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


                          }

    })         
                .attr('src', teamA.png);

    }); 
</code></pre>
