Joomla站点实现FTP下products文件夹图片滚动加载方案咨询

问题背景 #

我在Joomla站点中创建了一个需要展示大量图片的页面，图片存储于FTP服务器的products文件夹内。目前通过PHP的glob函数遍历并展示所有图片，代码如下：

$all_files = glob("products/*.*");
for ($i=0; $i<count($all_files); $i++)
{
 $image_name = $all_files[$i];
 echo '<img src="'.$image_name .'" alt="'.$image_name.'" />'."<br /><br />";
}

但因图片数量过多，希望实现类似Facebook的滚动加载效果：页面打开时先加载部分图片，剩余图片在滚动页面时再加载。

实现步骤 #

1. 后端改造：实现分页接口 #

将一次性获取所有图片改为分页返回（例如每次返回20张），可以编写一个Joomla兼容的PHP脚本（建议放在自定义组件目录下，确保权限安全）：

<?php
defined('_JEXEC') or die;

$page = isset($_GET['page']) ? (int)$_GET['page'] : 1;
$perPage = 20;
$start = ($page - 1) * $perPage;

// 获取所有图片文件并过滤格式
$all_files = glob(JPATH_SITE . '/products/*.*');
$allowedExts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
$imageFiles = array_filter($all_files, function($file) use ($allowedExts) {
    $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
    return in_array($ext, $allowedExts);
});

// 截取当前页数据
$paginatedFiles = array_slice($imageFiles, $start, $perPage);

// 返回JSON格式的图片URL
header('Content-Type: application/json');
$response = [];
foreach ($paginatedFiles as $file) {
    $relativePath = str_replace(JPATH_SITE, '', $file);
    $response[] = JUri::root() . ltrim($relativePath, '/');
}
echo json_encode($response);
?>

2. 前端实现滚动加载逻辑 #

在Joomla页面的图片容器中先渲染初始页图片，再通过滚动监听触发后续加载：

<!-- 图片容器 -->
<div id="image-container">
    <?php
    $perPage = 20;
    $all_files = glob(JPATH_SITE . '/products/*.*');
    $allowedExts = ['jpg', 'jpeg', 'png', 'gif', 'webp'];
    $imageFiles = array_filter($all_files, function($file) use ($allowedExts) {
        $ext = strtolower(pathinfo($file, PATHINFO_EXTENSION));
        return in_array($ext, $allowedExts);
    });
    // 加载第一页图片
    $initialFiles = array_slice($imageFiles, 0, $perPage);
    foreach ($initialFiles as $file) {
        $relativePath = str_replace(JPATH_SITE, '', $file);
        $imageUrl = JUri::root() . ltrim($relativePath, '/');
        echo '<img src="' . $imageUrl . '" alt="' . basename($file) . '" /><br /><br />';
    }
    ?>
</div>

<!-- 加载状态提示 -->
<div id="loading" style="display: none; text-align: center; padding: 10px;">加载中...</div>

<script>
let currentPage = 1;
const perPage = 20;
const imageContainer = document.getElementById('image-container');
const loading = document.getElementById('loading');
let isLoading = false;

// 检查是否滚动到接近底部
function checkScrollTrigger() {
    const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
    const windowHeight = window.innerHeight || document.documentElement.clientHeight;
    const docHeight = document.documentElement.scrollHeight;

    if (scrollPos + windowHeight >= docHeight - 100 && !isLoading) {
        loadNextPage();
    }
}

// 请求下一页图片并渲染
function loadNextPage() {
    isLoading = true;
    loading.style.display = 'block';
    currentPage++;

    fetch('<?php echo JUri::root(); ?>components/com_yourcomponent/get_images.php?page=' + currentPage)
        .then(res => res.json())
        .then(images => {
            if (images.length === 0) {
                loading.textContent = '已加载全部图片';
                window.removeEventListener('scroll', checkScrollTrigger);
                return;
            }
            // 追加新图片到容器
            images.forEach(url => {
                const img = document.createElement('img');
                img.src = url;
                img.alt = url.split('/').pop();
                imageContainer.appendChild(img);
                imageContainer.appendChild(document.createElement('br'));
                imageContainer.appendChild(document.createElement('br'));
            });
            isLoading = false;
            loading.style.display = 'none';
        })
        .catch(err => {
            console.error('加载失败:', err);
            loading.textContent = '加载失败，请刷新重试';
            isLoading = false;
        });
}

// 绑定滚动监听
window.addEventListener('scroll', checkScrollTrigger);
// 初始检查是否需要加载更多（如果初始内容不足一屏）
checkScrollTrigger();
</script>

3. Joomla环境适配要点 #

• 自定义PHP脚本必须添加defined('_JEXEC') or die;，防止未授权直接访问。
• 用JPATH_SITE获取服务器根路径，JUri::root()生成前端可访问的URL，避免路径错误。
• 若追求更高效的监听方式，可替换滚动监听为Intersection Observer API：

  // 替换原滚动监听代码
  const observer = new IntersectionObserver((entries) => {
      if (entries[0].isIntersecting && !isLoading) {
          loadNextPage();
      }
  }, { rootMargin: '100px' });
  observer.observe(loading);
  

内容的提问来源于stack exchange，提问作者Jackom