Question

请帮助我在Chrome中调用ajax时无法显示加载图像？这是我的剧本

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

            }

        });
}

我的html文件

<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>

我也在stackoverflow中访问了同样的问题，但我无法做到。

任何帮助将不胜感激。

Answer 1

我不确定，但这可能会有所帮助。尝试在$.ajaxStart()函数中显示图像并隐藏在$.ajaxComplete()中，因为当它成功时它会快速隐藏图像：

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

     });

}

更新

您可以使用beforeSend : function(){}来显示加载图片，complete: function(){}可用于隐藏加载图片。

Answer 2

你的PHP脚本返回了什么？

在这里根本不使用AJAX可能是个好主意。使您的PHP脚本输出二进制图像数据（例如，使用PHP函数“imagepng”），并且不要忘记使用PHP的头函数将正确的内容类型（例如“image / png”）添加到响应头。 / p>

然后使用Image对象代替使用AJAX：

var img = new Image();

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

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

如果您想支持旧浏览器，您还可以使用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');                                      
        }

        }

    });

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

希望上面的代码会有所帮助。

在将参数值和静态字符串用于jQuery之前，只需将其更改为concat传递参数值。

Answer 4

似乎您的图像路径和请求类型有问题。解决问题：

将图片放入您存在代码的同一目录中，或使用图片路径的完整网址。
然后设置async：true。

希望这会解决问题，因为某些时候chrome不支持单点路径。

ajax图像加载器在Firefox中工作但不在谷歌浏览器中工作

4 个答案:

更新