html+js+PHP实现图片和文字内容滚动延时加载效果

发布时间:
2023-08-07 19:18
阅读量:
56

以下是一个基于HTML、JavaScript和PHP的示例:

首先,创建一个HTML文件(例如index.html):

<!DOCTYPE html>
<html>
<head>
  <title>滚动延时加载示例</title>
  <style>
    #container {
      height: 600px;
      overflow-y: scroll;
    }
    .item {
      margin-bottom: 20px;
    }
    .item img {
      display: none;
    }
  </style>
</head>
<body>
  <div id="container">
    <div id="content"></div>
  </div>

  <script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
  <script src="script.js"></script>
</body>
</html>

在上面的示例中,我们创建了一个滚动容器(#container),并在其中创建了一个用于显示内容的容器(#content)。样式部分定义了容器的高度和滚动样式,并将图片的显示设置为隐藏。

接下来,创建一个名为script.js的JavaScript文件,并将以下代码添加到文件中:

$(document).ready(function() {
  var container = $('#container');
  var content = $('#content');
  var loading = false;
  var page = 1;

  // 监听滚动事件
  container.scroll(function() {
    if (container.scrollTop() >= content.height() - container.height() && !loading) {
      loadItems();
    }
  });

  // 加载数据
  function loadItems() {
    loading = true;
    $.ajax({
      url: 'data.php',
      type: 'GET',
      data: { page: page },
      dataType: 'json',
      success: function(response) {
        if (response.length > 0) {
          $.each(response, function(index, item) {
            var newItem = $('<div class="item"><img src="' + item.image + '"><p>' + item.text + '</p></div>');
            content.append(newItem);
            newItem.find('img').on('load', function() {
              $(this).fadeIn();
            });
          });
          page++;
        }
        loading = false;
      },
      error: function() {
        loading = false;
      }
    });
  }

  // 初始加载数据
  loadItems();
});

在上面的JavaScript代码中,我们使用jQuery库来简化操作。首先,我们在滚动容器上监听滚动事件。当滚动到底部时,会调用loadItems函数来加载更多数据。

loadItems函数使用AJAX请求向后端的PHP文件(data.php)发送请求,并传递当前页码。后端PHP文件应该根据页码返回相应的JSON数据。在成功获取数据后,我们使用$.each函数遍历数据,并创建新的<div>元素来显示图片和文本。在图片加载完成后,我们使用fadeIn函数来显示图片。

最后,创建一个名为data.php的PHP文件,并将以下代码添加到文件中:

<php
$itemsPerPage = 10;
$page = $_GET['page'];

// 模拟数据
$data = array();
for ($i = 1; $i <= $itemsPerPage; $i++) {
  $item = array(
    'image' => 'path/to/image' . ($page * $itemsPerPage + $i) . '.jpg',
    'text' => '这是第' . ($page * $itemsPerPage + $i) . '个项目'
  );
  $data[] = $item;
}

// 模拟延时
sleep(1);

// 返回JSON数据
header('Content-Type: application/json');
echo json_encode($data);
>

在上面的PHP代码中,我们首先获取传递的页码,并根据每页项目数量生成模拟数据。为了模拟延时加载,我们使用sleep函数暂停1秒。最后,我们将数据以JSON格式返回。

将上述三个文件(index.html、script.js和data.php)保存在同一个目录下,并将index.html文件在浏览器中打开。当滚动到底部时,会自动加载更多数据,并按照滚动延时加载的方式显示图片和文本。

请注意,以上示例仅用于演示目的,实际应用中可能需要根据具体需求进行修改和优化。


END