Javascript 加载时，在页面加载后使用占位符或动画加载div
第一个帖子在这里。 我是php新手，所以请友好一点：） 我有一个div，它为一个循环进行各种api调用。（仅供参考，这是一张股票市场公司的表格，我需要获取每个公司的当前价格）。当然，这会大大降低页面速度。我想先加载页面的其余部分，在它获取数据时有一个占位符/动画（这是一个额外的功能） 仅供参考，如果有帮助的话，我正在使用引导 例如：Javascript 加载时，在页面加载后使用占位符或动画加载div,javascript,jquery,ajax,Javascript,Jquery,Ajax,第一个帖子在这里。 我是php新手，所以请友好一点：） 我有一个div，它为一个循环进行各种api调用。（仅供参考，这是一张股票市场公司的表格，我需要获取每个公司的当前价格）。当然，这会大大降低页面速度。我想先加载页面的其余部分，在它获取数据时有一个占位符/动画（这是一个额外的功能） 仅供参考，如果有帮助的话，我正在使用引导 例如： <li class="clear"> <d
<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; ?>
%
如果希望在页面加载后执行api调用，则需要AJAX。PHP是一个预处理器脚本，在页面加载时运行
因此，您可以显示加载动画，该动画将在收到api请求数据后立即替换
这可以帮助您朝着正确的方向前进：
$（文档）.ready（函数（）{
$.ajax({
url:url，
成功：功能（数据）{
$（'.load-after-page-load with-spinning animation'）.html（data.price）；
}
});
});
。正在加载{
宽度：60px；
高度：60px；
边框顶部颜色：#0060a1；
边框顶部样式：实心；
边框顶部宽度：3倍；
边界半径：50%；
-webkit动画：旋转1s线性无限；
动画：旋转1s线性无限；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
我认为这是可行的，但请注意我的内联注释，因为它揭示了一些可能不是您想要的PHP变量。如果是这样，您将需要一种不同的方法。如果有任何结果，请告诉我。如果没有，您可以在Javascript打印任何错误时检查浏览器控制台；）
另外，您可能希望将CSS移动到样式表中，我不建议移动Javascript，因为现在它只在以下情况下加载：if（isset（$setting['incao\u trading\u url'）&&！empty（$setting['incao\u trading\u url'）&！empty（$setting['incao\u ico\u price'））
返回true
<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>
%
/*这段CSS负责加载动画*/
.加载器{
宽度：60px；
高度：60px；
边框顶部颜色：#0060a1；
边框顶部样式：实心；
边框顶部宽度：3倍；
边界半径：50%；
-webkit动画：旋转1s线性无限；
动画：旋转1s线性无限；
}
@-webkit关键帧旋转{
0% {
-webkit变换：旋转（0度）；
}
100% {
-webkit变换：旋转（360度）；
}
}
@关键帧旋转{
0% {
变换：旋转（0度）；
}
100% {
变换：旋转（360度）；
}
}
$（文档）.ready（函数（）{
$.ajax({
网址：，
数据类型：“json”，
成功：功能（数据）{
让ico_roi=data.price/；
设div=document.createElement（'div'）；
如果（ico_roi>1）{
$（分区）
.addClass（“eth-roi警报成功”）
.html（'X'）；
}否则{
$（分区）
.addClass（“eth-roi警报危险”）
.html（'X'）；
}
$（“#页面加载后显示价格”）.html（div）；
}
});
});
--
在上面的代码中，您没有共享任何与API调用或jQuery相关的内容。您想添加这些以便我们可以帮助您吗？您是否有正在使用的Jquery功能。因为我想你会想先装上。一旦加载了这些脚本，就可以调用php脚本。更新问题，我们可以提供帮助。@Darian jquery已经加载。嗨，谢谢你的帮助，我不太清楚它与$（document）.ready（function（）{$.ajax（{url:url，success:function（data）{$（'.load-after-page-load-with-spinning-animation'））.html（data.price）；}}}）；实际的api调用会去哪里？嗨，我没有使用php而是使用jQuery来进行api调用。查看有关jQueryAjax的文档。我希望这有帮助；）嗨，我迷路了，你有兴趣帮我一次性付款吗？我很乐意帮你，我会在这个周末再看一次，我有时间。我不需要任何东西，应该不会太难；）我会付钱给你的！我花了几个小时阅读如何让它工作。。。您可以查看上面的web url$cmc_id是股票代码，静态并手动保存在my db中$ico_价格是my db中的一个静态值$咖喱