在运行过程中的codeigniter中的空白屏幕

Question

I am developing a php script using codeigniter framework. My script is performing a heavy data loading process at the beginning of the script. I have used a gif in order to avoid displaying a blank screen for user until it completes the backend process. However, I noticed the gif I have used within the view won't display until all of the other processes are completed which is useless.

Is there anyway that I can run a preloading screen until other processes are completed? If so how can I do this?

I tried adding the page which contains gif at the top (before running all of the other processes) But still no luck, it loads everything along with the other views only.

Thanks in advance

MY CODE AS FOLLOWS,

SCRIPT

 <script>
        $(window).load(function() {
        //alert("IN");
        $.ajax({
        method :'GET',
        url: baseUrl+'main/LoadAllitems',
        //type: "GET",
        success:function(data){
        $('.se-pre-con').hide();
        $('#renderer').html(data);
        },
        error:function (){}
        });
    });
    </script>

CONTROLLER

public function LoadAllitems()
    {

        $MenuData['searches']=$this->get_search_form_data();
        $MenuData['dailydeals']=$this->get_daily_deals_data();
        //$MenuData['monthlydeals']=$this->get_monthly_deals_data();
        //$MenuData['featuredproducts']=$this->get_featured_products_data();

        $response=$this->load->view('includes/search',$MenuData,TRUE);
        echo $response;
        $response2=$this->load->view('homepage/dailydeals',$MenuData);
        echo $response2;
        //$this->load->view('homepage/mainslider',$MenuData);
        //$this->load->view('homepage/monthlydeals',$MenuData);
        //$this->load->view('homepage/feature',$MenuData);
        //$this->load->view('homepage/subscribe',$MenuData);
        //$this->load->view('main',$MenuData);

    }

INDEX

public function index()
    {
    $this->load->view('main',$MenuData);
  }

</div>

Answer 1

Load the page initially with the gif then when the page loaded. run a script that request an ajax call to request the data you needed. btw we can help lot more if you provide your code: view and controller.

SampleController.php

function index()
{
   $this->load->view('init_view');
}

function ajax_load_data()
{
   ...
   $response = $this->load->view('some_view',$data,TRUE);
   echo $response;
}

init_view.php

<div id="loading">SOMEGIF</div>
<div id="renderer"></div>

<script>

 $(document).ready(function(){
         $.ajax({
             method : 'get',
             url    : '<?php echo site_url("samplecontroller/ajax_load_data");?>'
             success: function(responce){
                    $('#loading').hide();
                    $('#renderer').html(responce);
                 }   
         })

   })

</script>

some_view.php

<h1><?= $title ?></h1>
<p><?= $intro ?></p>