Question

如何在Codeigniter的“提交”按钮中显示正在加载GIF？

 <button class="btn btn-primary" type="submit" name="save">
                        <?php echo lang('save'); ?>
                    </button>

在我的CSS文件中

#btn btn-primary{
position:fixed;
left:0px;
top:width:100%;
height:100%;
z-index:9999; 
background:url(images/pageLoader.gif)50% 50% no-repeat rgb(249,249,249);
}

在我的JS文件中：

$('document').ready(function(e){ 
$("#btn btn-primaryr").fadeout("slow")

Answer 1

尝试一下：不要在css Give in标签中使用图片

<img src="<?php url().images/pageLoader.gif?>" id="image">
$('.btn btn-primary').submit(function() {
    $('#image').css('visibility', 'visible');
});

Answer 2

您应该这样使用：

$("#signup-form").submit(function(event) {
    event.preventDefault();
    var form_data = new FormData($('#signup-form')[0]);
    $.ajax({
            url  : baseURL + "api/signup",
            type : "POST",
            data : form_data,   
            dataType : "JSON",   
            cache: false,
            contentType: false,
            processData: false,   
            beforeSend:function(){
              ajaxindicatorstart();
            },       
            success: function(resp){
                if(resp.resp == 1){
                    $('#signup-form')[0].reset();
                    alert(resp.Message);
                }else{
                    alert(resp.Message);  
                }
                ajaxindicatorstop();
            },
            error:function(error)
            {
                ajaxindicatorstop();
            }
        });
});


function ajaxindicatorstart() {
  if (
    jQuery("body")
      .find("#resultLoading")
      .attr("id") != "resultLoading"
  ) {
    jQuery("body").append(
      '<div id="resultLoading" style="display:none"><div><img src="' +
        baseURL() +
        'asset/img/ajax-loader.gif"><div>Loading...</div></div><div class="bg"></div></div>'
    );
  }

  jQuery("#resultLoading").css({
    width: "100%",
    height: "100%",
    position: "fixed",
    "z-index": "10000000",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    margin: "auto"
  });

  jQuery("#resultLoading .bg").css({
    background: "#000000",
    opacity: "0.7",
    width: "100%",
    height: "100%",
    position: "absolute",
    top: "0"
  });

  jQuery("#resultLoading>div:first").css({
    width: "250px",
    height: "75px",
    "text-align": "center",
    position: "fixed",
    top: "0",
    left: "0",
    right: "0",
    bottom: "0",
    margin: "auto",
    "font-size": "16px",
    "z-index": "10",
    color: "#ffffff"
  });

  jQuery("#resultLoading .bg").height("100%");
  jQuery("#resultLoading").fadeIn(300);
  jQuery("body").css("cursor", "wait");
}

function ajaxindicatorstop() {
  jQuery("#resultLoading .bg").height("100%");
  jQuery("#resultLoading").fadeOut(300);
  jQuery("body").css("cursor", "default");
}

正在加载图片网址：-

https://pqmsystems.biz/asset/img/ajax-loader.gif

请尝试这种方式。...

在Codeigniter中单击“提交”按钮后显示加载的gif

2 个答案: