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.
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');
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.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With