PHP は無限スクロール読み込みを実装します-PHPチュートリアル-php.cn

PHP は無限スクロール読み込みを実装します

王林

リリース： 2023-06-22 08:48:01

オリジナル

1501 人が閲覧しました

インターネットの発展に伴い、スクロール読み込みをサポートする必要がある Web ページが増えています。無限スクロール読み込みもその 1 つです。これにより、ページに新しいコンテンツを継続的に読み込むことができるため、ユーザーはよりスムーズに Web を閲覧できるようになります。この記事では、PHPを使って無限スクロールローディングを実装する方法を紹介します。

1. 無限スクロール読み込みとは何ですか?

無限スクロール読み込みは、スクロールバーに基づいて Web コンテンツを読み込む方法です。その原理は、ユーザーがページの一番下までスクロールすると、AJAX を通じてバックグラウンドデータが非同期的に取得され、新しいコンテンツが継続的に読み込まれることです。この読み込み方法により、ユーザーが頻繁にページを切り替えることを防ぎ、ユーザーエクスペリエンスを向上させることができます。

2. 無限スクロール読み込みの利点

1. 流暢性: 無限スクロール読み込みにより、ユーザーが頻繁にページを切り替えるのを防ぎ、ページの流暢さとユーザーエクスペリエンスを向上させることができます。

2. コンテンツの魅力を高める: 無限スクロール読み込みにより、新しいコンテンツを継続的に表示し、ユーザーをページに留まらせることができます。

3. サーバーの負荷を軽減する: ページ分割された読み込みではユーザーが手動でページにジャンプする必要がありますが、無限スクロールの読み込みでは新しいコンテンツの非同期リクエストのみが必要となるため、サーバーの負荷を軽減できます。

3. 無限スクロール読み込みを実現する手順

1. HTML 構造の構築

まず、新しいコンテンツの読み込みを表示するコンテナをページ内に構築します。次の構造を使用します:

<div id="load-more-container">
  <!-- 初始内容 -->
</div>

ログイン後にコピー

2. バインドスクロールイベント

ユーザーがページの一番下までスクロールすると、新しいコンテンツの読み込みをトリガーする必要があります。この関数を実装するには、ウィンドウのスクロールイベントをリッスンし、ページの一番下までスクロールしたかどうかを判断する必要があります。コードは次のとおりです。

  $(window).on('scroll', function () {
    if ($(window).scrollTop() + $(window).height() == $(document).height()) {
      loadMore();
    }
  });

ログイン後にコピー

コード内で、loadMore 関数は、新しいコンテンツをロードするために使用される関数です。

3. データの非同期読み込み

ユーザーがページの一番下までスクロールすると、新しいコンテンツを取得するためにバックグラウンドを非同期にリクエストする必要があります。ここでは jQuery の AJAX メソッド実装を使用します。

function loadMore() {
  $.ajax({
    type: 'GET',
    url: 'load-more.php',
    data: {
      //传递参数
    },
    success: function (data) {
         $('#load-more-container').append(data);
    }
  });
}

ログイン後にコピー

このうち、load-more.php はバックグラウンド処理データのファイルパスです。データの次のバッチは、load-more.php を通じて取得し、必要に応じて表示できます。

4. ページングの実装

無限スクロール読み込みを実装するときは、データのページングに注意する必要があります。ページングを実装するには、関連するロジックをload-more.phpに追加し、現在のページ数に基づいて対応するデータを取得します。コードは次のとおりです。

$page = $_GET['page'];
$count = 10; // 每页条数
$start = ($page-1) * $count;

// 数据库查询语句
$sql = "SELECT * FROM `table` LIMIT $start, $count";

ログイン後にコピー

5. 概要

この記事では、PHP を使用して無限スクロール読み込みを実現する方法を紹介します。スクロールイベントをリッスンし、バックグラウンドからデータを非同期にリクエストすることで、無限スクロールを実現し、必要に応じてページにデータを表示し、ページの流暢さとユーザーエクスペリエンスを向上させることができます。

以上がPHP は無限スクロール読み込みを実装しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。