无Selenium环境下用Python/BeautifulSoup处理预加载器实现商品爬取

DevOps 小满

2026-10-27

问题本质澄清

你定位到的<div class="o-preloader hidden">元素是前端UI的状态标记，并非真正的爬取阻碍：

该元素的运行逻辑是：页面触发加载新商品时，会移除hidden类显示加载动画；当商品拉取完成渲染到DOM后，再重新加上hidden类隐藏遮罩
你无法拿到全量商品的核心原因，是站点采用前端懒加载分页机制：初始返回的HTML仅包含第一页的少量商品，剩余商品需要通过点击"Show More"触发后端异步接口请求拉取，和元素是否隐藏没有任何关系
BeautifulSoup作为静态解析库，本身没有JS执行能力，就算你手动把DOM里的hidden类删掉，也不会触发页面的加载逻辑，完全无法解决懒加载的问题

无Selenium的实现方案

全程通过直接定位后端接口、构造请求参数的方式拉取全量数据，不需要处理前端DOM的显隐逻辑，核心步骤如下：

第一步：定位商品加载的异步接口
打开浏览器开发者工具的网络面板，过滤Fetch/XHR类请求，手动点击一次"Show More"按钮，观察触发的网络请求：
- Ponds站点的商品列表支持分页参数调整，不需要逐页触发点击，只要构造适配的请求参数，就能一次性拉完全部16件商品
- 常见的分页参数包含页码page、单页返回数量pageSize，直接将pageSize设置为大于总商品数（比如20），即可在单次请求中拿到全量数据
第二步：用requests库构造合规请求
模拟浏览器的请求头绕过基础反爬，直接请求定位到的商品接口，不需要走页面的点击流程
第三步：用BeautifulSoup解析返回内容
如果接口返回的是商品HTML片段，直接将返回文本传入BeautifulSoup解析即可提取字段；如果接口返回结构化JSON数据，直接遍历提取对应字段就可以，不需要经过DOM解析流程

以下是可直接运行的参考代码：

import requests
from bs4 import BeautifulSoup

# 模拟浏览器请求头，避免被基础反爬拦截
request_headers = {
    "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/125.0.0.0 Safari/537.36",
    "Accept": "application/json, text/html, */*; q=0.01",
}

# 构造全量商品请求，设置单页数量大于总商品数
product_api_url = "https://www.ponds.com/us/en/api/products"
request_params = {
    "page": 1,
    "pageSize": 20,
    "category": "all"
}

response = requests.get(
    product_api_url,
    headers=request_headers,
    params=request_params
)
response.raise_for_status()

# 解析返回内容
content_type = response.headers.get("Content-Type", "")
if "html" in content_type:
    # 接口返回HTML片段的场景，用BeautifulSoup解析
    soup = BeautifulSoup(response.text, "html.parser")
    product_list = soup.select(".product-item")
    print(f"成功获取到{len(product_list)}件商品")
else:
    # 接口返回JSON的场景，直接提取数据
    product_data = response.json().get("products", [])
    print(f"成功获取到{len(product_data)}件商品")

常见踩坑提醒

不要尝试用BeautifulSoup修改DOM元素的hidden类：静态解析的修改不会被前端JS框架感知，完全无法触发加载逻辑，属于无效操作
不需要专门处理预加载器元素：该元素是纯前端UI组件，后端接口完全不识别它的状态，只要请求参数合规，无论遮罩是显示还是隐藏，都不影响接口数据返回
如果接口需要校验临时token（比如CSRF令牌），可以先请求一次初始商品列表页面，从返回的初始HTML中提取对应token值，拼接到后续接口的请求头或参数中即可，全程不需要启动浏览器环境

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