Question

以下是我的代码，

 function image_effect(){
        $.ajax({
      url: "image/image.php",
      global: false, 
      type: "POST", 
      data: ({my_color:encodeURIComponent($('#my_color').val()),my_size:$('#my_size').val(),g_color1:encodeURIComponent($('#g_color1').val()),format:$('#format').val()}), 
      cache: false,
      beforeSend: function() {
        $('.mypreviewArea').html("<img src='images/animated_loading.gif' />");
      },
      success: function(html) {
        $('.mypreviewArea').html(html);
      }
    });

        }

$("#my_size").bind("slider:changed", function (event, data) {
  // The currently selected value of the slider


    image_effect();


    });

Iam尝试通过aj通过ajax将参数传递到服务器页面来生成新图像，此代码在获取从服务器页面生成的loading image之前显示actual image工作正常...但有时候如果生成的时间很长... loading image只会在短时间内显示，并在等待分钟the actual out put image will be shown后消失...但我想显示loading image直到实际图像显示...不应该显示空格，因为人们会认为，Page已经停止加载......如何解决这个问题？

Answer 1

尝试此功能正常工作：

<div id="loader"> <img id="img-spinner" src="img/ajax-loader.gif" style="position:fixed;left:50%;top:50%;margin-left:-32px;margin-top:-32px;z-index:9999;"/></div>



 $(document).ready(function(){  
        $("#loader").ajaxStart(function() {
         $("#loader").show();
         }).ajaxStop(function() {
           $("#loader").hide();
   });});

Answer 2

看起来您只是加载了一段HTML，您将其转储到页面中，替换了加载，而该片段实际上包含了加载您真实图像的片段？在这种情况下，浏览器永远不会开始加载图像，直到成功回调完成后！

您想要的是将带有图像的新HTML添加到容器中，但默认情况下是隐藏的。将加载事件处理程序附加到您插入的图像，并在加载图像时显示它。

Ajax有时没有显示加载图像...

2 个答案: