JavaScript Image Loading

Question

When I am click on a button then a javascript function is invoked and it loads the image in the page. But the image is not loading properly. The image size is 72kb and the image coming from the DB and it's already loaded in the server start.

If I put any alert message then the image loads properly. What's the reason behind the issue?

    var catImg = document.getElementById(\"CategorySampleImage\");
    var oldImgSrc = catImg.src;
    var newImgSrc = oldImgSrc.substr(0,oldImgSrc.indexOf(\"images\"))+\"images/\"+\""+imageName+"\";
    catImg.src=newImgSrc;
    for (var intCounter = 1; intCounter <= 500; intCounter++){
    for (var counter = 1; counter <= 500; counter++)
    {
           if(counter==500)
                 break;
             }
    }
     document.getElementById(\"light\").style.display=\"block\";
    document.getElementById(\"fade\").style.display=\"block\";";  

code works fine for all browsers except IE6. In IE6 I can see a white area in place of the Image and I need to right click on theat white area and select “Show Image”. But a smaller image in the same div displays correctly. Don't know how could I solve this issue on IE6.

Answer 1

You can use onload event on the image object when loading it to make sure that it is already loaded.

Ex.

catImg.onload = function(){ /* Image is loaded. Do something here*/ }