根据滚动位置加载整个页面部分

Question

我正在开发一个单页网站，我想在 window 滚动到该特定部分时加载每个部分。现在我知道你可以延迟加载图像，但我想延迟加载整个部分。我认为唯一可行的方法是，如果我将 html 代码放入 jQuery，然后在到达滚动位置时加载它。但我宁愿不这样做。

这是一个 wordpress 网站，我使用

将每个页面加载到主页

<?php require_once(''); ?>

所以我的页面布局是这样的

<?php get_header(); ?>

<?php require_once('section_one.php'); ?>

<?php require_once('section_two.php'); ?>

<?php get_footer(); ?>

那么我是否可以使用 php 仅在到达滚动位置时才加载这些部分，或者使用 jQuery 是否有更好的方法？我还希望网络爬虫等仍然能够看到我的整个页面。因此，如果 jQuery 被禁用，我希望显示整页。关于此的任何指导或教程都会非常有帮助，谢谢

Answer 1

在控制器中创建一个方法，该方法将根据节号呈现 sub-view，return 您 HTML。或者在您的情况下创建一个文件，该文件将接受带有节号的 GET 请求，并呈现所需节文件的输出，就像在大多数 PHP 框架中所做的那样（见下文）。这样你就可以在滚动位置有必要时发出AJAX请求，并在页面中插入returned HTML。

<?php
$section_number = $_GET['section'];

ob_start();
if(file_exists(__DIR__ . 'section_' . $section_number . '.php')) {
    include(__DIR__ . 'section_' . $section_number . '.php');
    $var=ob_get_contents(); 
    ob_end_clean();
    echo $var;
}

echo '';

Answer 2

我可以建议您加载内容并将其隐藏为 CSS 吗？然后制作滚动间谍解决方案以在该部分进入视口时显示内容？为什么要在内容加载时强迫某人等待？

根据滚动位置加载整个页面部分

loading entire page sections based on scroll position

html

php

wordpress

jquery

lazy-loading