NodeJS整页截图异常：懒加载与粘性导航适配问题

问题概述 #

尝试为开启懒加载的页面拍摄整页截图时，当前脚本未等待懒加载或动画完成就执行截图，导致截图损坏；同时需要实现类似Chrome插件「Go full page」的功能，确保截图时粘性导航栏仅在页面顶部显示一次。

核心问题分析 #

1. 固定延时不可靠：原脚本用setTimeout等待，无法确保懒加载元素完全加载，导致截图内容缺失。
2. 粘性导航处理缺失：滚动过程中粘性导航会重复出现在不同截图片段，最终合并后导航栏重复错位。
3. 手动截图合并冗余：手动拆分两次截图合并的方式效率低，且容易出现高度计算误差。

解决方案步骤 #

1. 可靠等待懒加载完成 #

• 循环滚动页面，每次滚动后等待所有懒加载元素（如图片）加载完成，同时等待页面高度稳定（不再因懒加载内容加载而增加）。
• 替换固定延时为监听元素加载状态，确保内容完全渲染。

2. 处理粘性导航栏 #

• 截图前修改粘性导航的CSS样式，将其position从sticky改为absolute并固定到页面顶部，确保截图时仅在顶部显示一次，不会随滚动重复出现。

3. 优化截图逻辑 #

• 使用Puppeteer原生的fullPage: true参数直接生成整页截图，避免手动拆分合并的冗余操作，同时确保页面高度计算准确。

完整改进代码 #

const puppeteer = require('puppeteer');
const fs = require('fs');

(async () => {
    // 启动浏览器，使用旧版无头模式提升兼容性
    const browser = await puppeteer.launch({
        args: ['--disable-http2', '--start-maximized'],
        headless: 'old',
        defaultViewport: null,
    });

    const page = await browser.newPage();
    // 设置真实用户代理
    await page.setUserAgent(
        'Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/110.0.0.0 Safari/537.36'
    );
    const url = 'https://www.apple.com/macbook-air/';
    
    // 导航到页面，等待网络空闲和DOM加载完成
    await page.goto(url, {
        waitUntil: ['networkidle0', 'domcontentloaded'],
        timeout: 120000,
    });

    // 暂停所有视频，避免动画干扰截图
    await page.evaluate(() => {
        document.querySelectorAll('video').forEach(video => video.pause());
    });

    // 处理懒加载：循环滚动直到页面高度稳定
    let previousHeight = 0;
    let currentHeight = await page.evaluate(() => document.body.scrollHeight);
    
    while (currentHeight > previousHeight) {
        previousHeight = currentHeight;
        // 滚动到页面底部
        await page.evaluate(() => window.scrollTo(0, document.body.scrollHeight));
        // 等待所有图片加载完成
        await page.waitForFunction(() => {
            return Array.from(document.querySelectorAll('img')).every(img => img.complete);
        }, { timeout: 10000 });
        // 等待页面高度稳定
        await page.waitForTimeout(500);
        currentHeight = await page.evaluate(() => document.body.scrollHeight);
    }

    // 处理粘性导航：将顶部粘性元素固定到页面顶部
    await page.evaluate(() => {
        // 匹配常见粘性导航选择器，可根据目标页面调整
        const stickyElements = document.querySelectorAll('header[style*="position: sticky"], .sticky-header, [data-sticky="true"]');
        stickyElements.forEach(el => {
            const rect = el.getBoundingClientRect();
            el.style.position = 'absolute';
            el.style.top = `${rect.top + window.scrollY}px`;
            el.style.left = `${rect.left}px`;
            el.style.width = `${rect.width}px`;
        });
    });

    // 等待页面动画完成（兼容无jQuery场景）
    await page.waitForFunction(() => {
        return Array.from(document.querySelectorAll('*')).every(el => {
            const computedStyle = window.getComputedStyle(el);
            return computedStyle.animationName === 'none' && computedStyle.transitionDuration === '0s';
        });
    }, { timeout: 8000 }).catch(() => {
        console.log('动画等待超时，继续执行截图');
    });

    // 生成整页截图
    await page.screenshot({
        path: 'final_fullpage.jpg',
        fullPage: true,
        type: 'jpeg',
        quality: 90
    });

    console.log('整页截图已生成：final_fullpage.jpg');
    await browser.close();
})();

关键细节说明 #

• 懒加载处理：通过循环滚动+图片加载状态检测+页面高度稳定判断，确保所有懒加载内容渲染完成。
• 粘性导航修复：修改元素定位属性，避免滚动时粘性导航重复出现在视口，保证截图中导航仅在顶部显示一次。
• 动画等待：检测页面所有元素的动画状态，确保动画完成后再截图，避免出现半动画状态的损坏截图。
• 无头模式选择：使用headless: 'old'避免新版无头模式的兼容性问题，确保页面渲染正常。

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