Ajax image downloader works in Firefox but does not work in Google Chrome

Question

Please help, I can not show the loading image when calling 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 also visited the same question asked in stackoverflow, but I could not do it.

Any help would be appreciated.

Answer 1

I'm not sure, but that could help. Try to show the image in the $.ajaxStart() function and hide it in $.ajaxComplete() , because when he succeeded, he quickly hid the image:

 function ajx_load_image(category){ $.ajax({ type:'POST',    url: '/img_load.php', //<------------------here '.' single dot removed    data: {num_count:load_count,cat:category},    async: false, beforeSend: function(){ $("#"+category+"-text-1 .loading").show(); // showing image },    success: function(data){ data=jQuery.trim(data); if(data != ''){ $("#"+category+"-text-1 .items").append(data); }else{ $('.next.browse.right.'+category).removeClass('disabled'); } }, complete: function(){ $("#"+category+"-text-1 .loading").hide(); } }); } 

Update:

You can use beforeSend : function(){} to show the loaded image, and complete: function(){} can be used to hide the loaded image.

Answer 2

What does your PHP script return?

It would probably be nice not to use AJAX at all. Make your PHP-Script output binary data (for example, using the PHP function "imagepng") and remember to add the correct content type (for example, "image / png") to the response headers using the PHP 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 3

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

} Code>

Hopes for the code will help.

Change it only to the concat value of the passing argument and the static string before using it in jQuery.

Answer 4

You seem to have problems with the image outline and request type. To fix the problem:

• Put the image in the same directory where you exist, or use the full URL for the path to the image.
• Then set async: true.

Hope this solves the problem, because once chrome does not support single-point paths.