第一个帖子在这里。 我是php的新手，所以请很好：）
我有一个div，它使一个循环进行各种api调用。 （仅供参考，它是一张股票市场公司的表格，我需要获取每个公司的当前价格）。自然，这会大大降低页面速度。我想先加载页面的其余部分，并在获取数据时使用占位符/动画（这是一个奖励）。
仅供参考，如果有帮助，我正在使用引导程序。
例如：
<li class="clear">
<div style="width:50%; float:left;">
<div class="item-avatar" style="display:inline-block">
<a href="<?php bp_group_permalink() ?>"><?php bp_group_avatar( 'type=thumb&width=40&height=40' ) ?></a>
</div>
<div class="item" style="display:inline-block">
<div class="item-title"><a href="<?php bp_group_permalink() ?>"><?php bp_group_name() ?></a></div>
</div>
</div>
<div style="width:50%; float:left;">
<div class="item-meta">
<div class="critix-score">
<?php $groupid = bp_get_group_id(); ?>
<?php echo get_totoal_avg_critix($groupid); ?>%
</div>
<?php
$group_id = bp_get_group_id();
$setting = groups_get_groupmeta( $group_id, 'incao_info_tab_meta' );
?>
<?php if(isset($setting['incao_trading_url']) && !empty($setting['incao_trading_url']) && !empty($setting['incao_ico_price'])){ ?>
<?php
$cmc_id = $setting['incao_trading_url'];
$phi = 'https://api.coinmarketcap.com/v2/ticker/'.$cmc_id.'/';
$current_price = shell_exec('curl -s "'.$phi.'" | egrep -i price | cut -d : -f2 ');
$ico_price = $setting['incao_ico_price'];
$ico_roi = $current_price / $ico_price; ?>
<?php if ($ico_roi > 1) { ?>
<div class="eth-roi alert-success" style=""><?php //echo (round($ico_roi,1)); ?>X</div>
<?php } else { ?>
<div class="eth-roi alert-danger" style=""><?php //echo (round($ico_roi,1)); ?>X</div>
<?php }
} else {?>
<div class="eth-roi">--</div>
<?php } ?>
</div>
</div>
</li>
<?php endwhile; ?>
谢谢大家！
更新-我已经发布了整个代码。不确定这是否是最好的方法，但是如果您想看到它，它就可以http://cryptocritix.com使用...它的“ ICOS最近交易” DIV
jquery，引导程序已加载
答案 0 :(得分：0)
如果您希望在页面加载后执行api调用，则需要AJAX。 PHP是预处理器脚本，并且在页面加载时运行。
因此，您可以显示一个加载动画，该动画将在收到api请求数据后立即替换。
这可以在正确的方向上为您提供帮助：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- CSRF Token -->
<meta name="csrf-token" content="{{ csrf_token() }}">
<title>Master thesis application</title>
<!-- Jquery -->
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.15.0/lodash.min.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous">
</script>
<link rel="stylesheet" type="text/css" href="https://getbootstrap.com/docs/3.3/examples/jumbotron-narrow/">
<link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css">
<!-- Import css file-->
<link href="{{asset('css/app.css')}}" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script type="https://cdn.jsdelivr.net/npm/lodash@4.17.10/lodash.min.js"></script>
<!-- Highcharts for normal chart
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/series-label.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="https://code.highcharts.com/modules/export-data.js"></script>
-->
<!-- Highcharts for normal tockSchart -->
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script src="https://code.highcharts.com/stock/highstock.js"></script>
<script src="https://code.highcharts.com/stock/modules/exporting.js"></script>
</head>
<script type="text/javascript">
</script>
<body>
@include('file.hed')
@include('file.bar')
<div class="container ">
@include('file._info')
@yield('main')
</div> <!-- /container -->
@include('file.down')
</body>
</html>
<script>
window.onscroll = function() {myFunction()};
var navbar = document.getElementById("navbar");
var sticky = navbar.offsetTop;
function myFunction() {
if (window.pageYOffset >= sticky) {
navbar.classList.add("sticky")
} else {
navbar.classList.remove("sticky");
}
}
</script>
$(document).ready(function() {
$.ajax({
url: url,
success: function(data) {
$('.load-after-page-load-with-spinnning-animation').html(data.price);
}
});
});.loading {
width: 60px;
height: 60px;
border-top-color: #0060a1;
border-top-style: solid;
border-top-width: 3px;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
答案 1 :(得分：0)
我认为这可以解决问题，但是请注意我的内联注释，因为它揭示了一些PHP变量，而这些变量可能不是您想要的。如果真是这样，您将需要不同的方法。让我知道这是否有任何结果。如果没有，您可以检查浏览器控制台中的Javascript是否显示任何错误;）
此外，您可能希望将CSS移到样式表中，因此我不建议您移动Javascript，因为现在只有在if (isset($setting['incao_trading_url']) && !empty($setting['incao_trading_url']) && !empty($setting['incao_ico_price']))返回true时才加载Javascript。
<li class="clear">
<div style="width:50%; float:left;">
<div class="item-avatar" style="display:inline-block">
<a href="<?php bp_group_permalink(); ?>"><?php bp_group_avatar( 'type=thumb&width=40&height=40' ); ?></a>
</div>
<div class="item" style="display:inline-block">
<div class="item-title">
<a href="<?php bp_group_permalink(); ?>"><?php bp_group_name(); ?></a>
</div>
</div>
</div>
<div style="width:50%; float:left;">
<div class="item-meta">
<div class="critix-score">
<?php $group_id = bp_get_group_id(); ?>
<?php echo get_totoal_avg_critix($group_id); ?>%
</div>
<?php
//$group_id = bp_get_group_id(); // WAS ALREADY DECLARED BUT WITHOUT '_', I ADDED THE UNDERSCORE TO THE FIRST ONE !!
$setting = groups_get_groupmeta( $group_id, 'incao_info_tab_meta' );
?>
<?php if (isset($setting['incao_trading_url']) && !empty($setting['incao_trading_url']) && !empty($setting['incao_ico_price'])) : ?>
<?php
$cmc_id = $setting['incao_trading_url'];
$phi = 'https://api.coinmarketcap.com/v2/ticker/'.$cmc_id.'/';
?>
<style>
/* THIS PIECE OF CSS IS RESPONSIBLE FOR THE LOADING ANIMATION .. */
.loader {
width: 60px;
height: 60px;
border-top-color: #0060a1;
border-top-style: solid;
border-top-width: 3px;
border-radius: 50%;
-webkit-animation: spin 1s linear infinite;
animation: spin 1s linear infinite;
}
@-webkit-keyframes spin {
0% {
-webkit-transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
</style>
<div id="price-showing-after-page-load">
<div class="loader"></div>
</div>
<?php
/**
* SINCE THE NEXT PIECE OF JAVASCRIPT IS EXECUTED CLIENT SIDE,
* IT REVEALS $phi (and $cmc_id), $setting['incao_ico_price'] and API 'price' value !!
* WOULD THAT BE AN ISSUE ?? OTHERWISE WE NEED A DIFFERENT APPROACH !!
*/
?>
<script>
$(document).ready(function() {
$.ajax({
url: <?php echo $phi; ?>,
dataType: 'json',
success: function(data) {
let ico_roi = data.price / <?php echo $setting['incao_ico_price']; ?>;
let div = document.createElement('div');
if (ico_roi > 1) {
$(div)
.addClass('eth-roi alert-success')
.html('<?php //echo (round($ico_roi,1)); ?>X');
} else {
$(div)
.addClass('eth-roi alert-danger')
.html('<?php //echo (round($ico_roi,1)); ?>X');
}
$('#price-showing-after-page-load').html(div);
}
});
});
</script>
<?php else : ?>
<div class="eth-roi">--</div>
<?php endif; ?>
</div>
</div>
</li>