極端に長くせずに質問を設定する方法がよくわからなかったので、ここでその詳細を説明します。
基本的に、私のコードは別のサーバーのディレクトリから画像を取得しています。オンラインで見つけた jQuery ページネーション スクリプトを使用しています。スクリプトは機能しますが、ページにすべての画像が読み込まれた後でのみ機能します (画像が多いため、読み込みに時間がかかります)。
私が達成したいのは、基本的に、一度に 36 の結果のみを表示することで、ページをすばやくロードできるようにすることです。jQueryのページネーションが機能することを望みますが、さらに理想的なのは、スクロールダウンするだけです。これでいくつかの異なる無限スクロール スクリプトを使用してみましたが、何らかの理由で正しく動作しません。
うまくいけば、私がやろうとしていることを非常に明確にしています。
ページへのリンクは次のとおりです: http://habbolicious.com/v2/testing.php
...そしてここにコードがあります：
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>