我正在使用codeigniter,我的控制器中有一些cURL脚本,它将获得一些大的json数据,加载它大约需要15-20秒。
我的观点是加载时间很长,就像卷曲时间(15-20s)一样。
如何首先用一些"加载图标"加载我的视图,然后在脚本下载所有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
是来自控制器的$json['data']
。
谨致问候。
jQuery具有函数ajaxStart和ajaxStop,您可以这样使用它们:
$(document).ajaxStart(function() {
$("#loading-image").show();
}).ajaxStop(function() {
$("#loading-image").hide();
});
更多信息点击这里和这里