<html>
<head>
<style>
#loadImg{position:absolute; z-index:1000; display:none}
</style>
</head>
<body>
<img id="loadImg" src="/loadImg.gif" />
</body>
</html>
<?
$get = file_get_contents("http://shikimori.org/api/animes?limit=20&order=ranked");
$get = json_decode($get);
for ($i = 1; $i < count($get); $i++) {
echo '<h6><a id="'.$get[$i]->id.'" title="'.$get[$i]->russian.'" href="http://shikimori.org'.$get[$i]->url.'" data-toggle="popover">'.$i.'.'.$get[$i]->russian.'</a></br></h6>';
}
?>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="popover"]').popover({
html: true,
title: $(this).attr('title'),
content:
function() {
return $.ajax({
url: '//shikimori.org/api/animes/'+$(this).attr('id'),
dataType: 'html',
async: false,
beforeSend: function() {startLoadingAnimation()},
success: function() {stopLoadingAnimation()}
}).responseText;
},
trigger: 'hover',
placement: 'left'
});
});
function startLoadingAnimation()
{
var imgObj = $("#loadImg");
imgObj.show();
var centerY = $(window).scrollTop() + ($(window).height() + imgObj.height())/2;
var centerX = $(window).scrollLeft() + ($(window).width() + imgObj.width())/2;
imgObj.offset({top:centerY, left:centerX});
}
function stopLoadingAnimation()
{
$("#loadImg").hide();
}
</script>
Пытаюсь реализовать popup окна, в которых отображалась бы информация с другого сайта. Проблема вот в чем: Данный код показывает popup окно только после загрузки данных с сайта, т.е анимация загрузки даже не успевает стартовать, как сразу же завершается. Как это исправить?
