ajax image loader working in firefox but not working in google chrome

Question

Please help i am unable to show loading image when call made to ajax in chrome? Here is my script

function ajx_load_image(category)
{
    $("#"+category+"-text-1 .loading").show(); // showing image

    $.ajax({
             type:'POST', 
             url: './img_load.php',
             data: {num_count:load_count,cat:category},
             async: false,

            success: function(data)
            {
                data=jQuery.trim(data);
                if(data != ''){                 
                    $("#"+category+"-text-1 .loading").hide();

                    $("#"+category+"-text-1 .items").append(data);
            }
            else{
                $('.next.browse.right.'+category).removeClass('disabled');                                      
            }

            }

        });
}

my html file

<div id="tamil-text-1" class="tab-content">
  <div class="tab-top-curve"><img src="images/tab-top-curve.jpg" width="700" height="19" /></div>
  <div class="tab-mid-curve"> <a class="prev browse left disabled tamil" name="tamil"></a>
    <!-- root element for scrollable -->
    <div class="loading"><img src='images/ajax-loader.gif' /></div>
    <div class="scrollable">
      <!-- root element for the items -->
      <div class="items"> </div>
    </div>
    <!-- "next page" action -->
    <a class="next browse right tamil" name="tamil"></a> </div>
  <div class="tab-top-curve"><img src="images/tab-bottom-curve.jpg" width="700" height="31" /></div>
</div>

I have also visited same question ask in stackoverflow but i could not make it.

Any help will be appreciated.

Answer 1

What is your PHP-Script returning?

Probably it would be a good idea not to use AJAX here at all. Make your PHP-Script output the binary image data (e.g. using the PHP function "imagepng") and don't forget to add the correct content type (e.g. "image/png") to the response headers using PHP's header-function.

Then instead of using AJAX use the Image object:

var img = new Image();

img.onload = function() 
{ 
   // ... your code when image was loaded.
};

img.src = 'img_load.php?num_count=' + load_count + '&cat=' + category;

If you want to support older browsers you can also create an image element using document.createElement('img');

Answer 2

function ajx_load_image(category) {

var imageLoader =  "#"+category+"-text-1";   
$(imageLoader +" .loading").show(); // showing image
$.ajax({
         type:'POST', 
         url: './img_load.php',
         data: {num_count:load_count,cat:category},
         async: false,

        success: function(data)
        {
            data=jQuery.trim(data);
            if(data != ''){                 
                $(imageLoader +" .loading").hide();

                $(imageLoader +" .items").append(data);
        }
        else{
            $('.next.browse.right.'+category).removeClass('disabled');                                      
        }

        }

    });

}

Hope above code will help.

Only change it to concat passing argument value and static string before using it into jQuery.