Question

我正在使用codeigniter，我的控制器中有一些cURL脚本，这将获得一些大的json数据，加载它需要大约15-20秒。

我的视图加载时间与卷曲时间（15-20秒）一样长。

如何首先使用一些“加载图标”加载我的视图，并在脚本下载所有json数据后用我的数据替换“加载图标”？

我的代码：

查看：

        <?php foreach ($items as $item): ?>
            <div class="item-slot">
                <img src="http://cdn.steamcommunity.com/economy/image/<?= $item['icon_url'] ?>">
                <p><?= $item['name'] ?></p>
            </div>
        <?php endforeach; ?>

控制器（open_inventory函数）：

public function open_inventory($steam_id, $appid = 730, $contextid = 2)
{
    $data = array("steamid" => $steam_id, "appid" => $appid);                                                                    
    $data_string = json_encode($data);                                                                                   

    $ch = curl_init('http://localhost:3000/inventory');                                                                      
    curl_setopt($ch, CURLOPT_CUSTOMREQUEST, "POST");                                                                     
    curl_setopt($ch, CURLOPT_POSTFIELDS, $data_string);                                                                  
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);                                                                      
    curl_setopt($ch, CURLOPT_HTTPHEADER, array(                                                                          
        'Content-Type: application/json',
        'Content-Length: ' . strlen($data_string))
    );
    $json = json_decode(curl_exec($ch),true);

    if($json['data'])
    {
        return $json['data'];
    }
    return false;
}

视图中的

$items是来自Controller的$json['data']。

问候。

Answer 1

jQuery具有ajaxStart和ajaxStop的功能，您可以这样使用：

$(document).ajaxStart(function() {
  $("#loading-image").show();
}).ajaxStop(function() {
  $("#loading-image").hide();
});

更多信息here和here

在加载应用程序后使用'加载'卷曲数据

1 个答案: