Ajax加载图像在ajax内容加载之前未显示;图像和内容加载在相同的div

Question

我想先加载图像加载器<div id="ajax-content-container">，然后数据内容将显示在同一div div <div id="ajax-content-container">使用ajax。然而，图像加载器甚至没有出现，内容直接显示，没有加载图像加载器。如果我在beforeSend下放置返回false，它会显示反向并且负载不会停止。

beforeSend: function(){ 
    $('#ajax-content-container').html('<img src="<?php echo base_url()?>/img/ajax- 
    loader.gif" width="200" height="200" style="margin-left:450px; margin-top:300px;" />'); 
    return false; 
}` 

如何完成此操作？这是我的代码。谢谢您的帮助。

查看：

<?php if (!isset($ajax_req)): ?> 
<div class="row"> 

<div class="span3"> <?php echo 
form_dropdown('courses',$dropdown,$selected_value,'id="select_id"');?> </div> 
<div class="span3"> <?php echo 
form_dropdown('schedule',$dropdown_sched,$date_value,'id="date_option"');?> </div> 
<div class="span2"> <?php echo 
form_dropdown('status',$dropdown_status,$status_value,'id="status_id"');?></div> 


</div> 
<?php endif; ?> 

<div id="ajax-content-container"> 

<table class="table table-bordered table-condensed table-striped table-hover"> 
<tr> 
<th>First Name</th> 
<th>Last Name</th> 
<th>Email Address</th> 
<th>Phone Number</th> 
<th>Status</th> 

</tr> 
<?php foreach ($student_list as $key=>$value): ?> 
    <tr> 
    <td><?php echo $value->first_name; ?></td> 
    <td><?php echo $value->last_name; ?></td> 
    <td><?php echo $value->email; ?></td> 
    <td><?php echo $value->phone_no; ?></td> 
    <td><?php echo $value->status; ?></td> 
    </tr> 
<?php endforeach; ?> 

</table> 
</div> 

的javascript：

<script type="text/javascript"> 

$(document).ready(function() { 
ajax_courses(); 
ajax_sched(); 
ajax_status(); 

}); 

function ajax_courses() { 

$('#select_id').change(function() { 
var course_id = $("#select_id").val(); 
var postData = {'course_id':course_id}; 
var timeout; 

$.ajax({ 
    url: "<?php echo base_url(); ?>/ajax_student_controller/get_ajax_course_student/", 
    async: false, 
    type: "POST", 
    data: postData, 
    dataType: "html", 
    beforeSend: function(){ 
    $('#ajax-content-container').html('<img src="<?php echo base_url()?>/img/ajax- 
    loader.gif" width="200" height="200" style="margin-left:450px; margin-top:300px;" 
    />'); 

    }, 
    success: function(data) { 
    $('#ajax-content-container').html(data); 

    }, 

    }) 
    }); 

    } 

</script> 

Answer 1

这样吧，你不需要包装内ajax_courses()一个change功能，只要把它做好准备，当onchange函数被调用加载器图像将被添加在ajax-content-container中，并且当ajax请求完成时，ajax-content-container div将在容器中具有期望的内容。

注确保您加载图片的路径是正确的，否则图像将不会显示

<script type="text/javascript"> 

$(document).ready(function() { 
//ajax_courses(); 
ajax_sched(); 
ajax_status(); 

$('#select_id').change(function() { 
$('#ajax-content-container').html('<img src="<?php echo base_url()?>/img/ajax-loader.gif" width="200" height="200" style="margin-left:450px; margin-top:300px;" />'); 
var course_id = $("#select_id").val(); 
var postData = {'course_id':course_id}; 
var timeout; 

$.ajax({ 
    url: "<?php echo base_url(); ?>/ajax_student_controller/get_ajax_course_student/", 
    async: false, 
    type: "POST", 
    data: postData, 
    dataType: "html", 
    success: function(data) { 
    setTimeout(function(){ 
    $('#ajax-content-container').html(data);  
    },3000); // 3 seconds delay 

    }, 

    });//end ajax 
    }); // end onchange 

    });//end ready 

</script> 

其他方式，我将建议地方加载图像中的Ajax的内容div容器与display:none当onchange发生使用$(".loading_image").show()时ajax就完成，如果loading_image存在使用$(".loading_image").hide()

希望它可以帮助你