Capturer le contenu différé dans une capture pleine page

Une capture pleine page photographie tout le document d'un coup, mais un navigateur ne charge le contenu différé qu'à proximité de la partie regardée. Les images avec loading="lazy" et les sections remplies par un IntersectionObserver restent des espaces réservés : le haut de l'image est juste, le reste n'est que des cases grises.

Le voir sur une page de test

La page de test ci-dessous compte six sections, qui ne se remplissent qu'une fois à l'écran. Téléchargez-la et envoyez-la comme html pour voir vous-même les deux résultats.

• lazy-page.html : six sections qui se chargent en devenant visibles, sans requête réseau, si bien que le résultat est toujours le même

Faire défiler la page d'abord

jq -n --rawfile html lazy-page.html '{
  html: $html,
  width: 800,
  height: 600,
  full_page: true,
  full_page_readiness: "scroll"
}' > request.json

curl -sS https://api.ironfang.com/render/v1/screenshot \
  -H "Authorization: Bearer $IRONFANG_API_KEY" \
  -H "Content-Type: application/json" \
  --data-binary @request.json \
  -D headers.txt -o page.png

grep -i '^x-ironfang-warnings' headers.txt

Avec full_page_readiness sur scroll, la page est parcourue vers le bas, une fenêtre à la fois, avant la capture. Chaque étape attend jusqu'à 750 ms les images qu'elle a révélées ; le parcours revient ensuite en haut et attend jusqu'à 2 secondes les images comprises dans la capture. L'ensemble dure au plus 10 secondes et 60 étapes.

La capture est toujours prise depuis le haut, si bien qu'un en-tête sticky apparaît une seule fois, en haut, et non là où le parcours l'a laissé.

Lire les avertissements

Un parcours qui s'arrête trop tôt n'est pas un échec : la capture réussit et l'en-tête X-Ironfang-Warnings indique ce qui était incomplet. Une tâche porte la même information dans diagnostics.readiness.

• scroll_budget_exhausted : le parcours a manqué de temps ou d'étapes avant le bas de la capture.
• images_incomplete : des images de la capture se chargeaient encore à la fin de l'attente.
• images_broken : des images de la capture n'ont pas pu se charger. C'est la page, capturée telle qu'elle est.
• height_capped : la page était plus haute que full_page_max_height et la capture a été coupée là.

Quand le défilement ne suffit pas

Certains contenus attendent autre chose que la position de défilement : un appel d'API lent, ou une liste qui se charge après la dernière section. Attendez un élément qui n'existe qu'une fois tout chargé, et ajoutez une règle de réussite pour qu'une capture vide soit refusée plutôt que livrée.

{
  "url": "https://example.com/catalogue",
  "full_page": true,
  "full_page_readiness": "scroll",
  "wait_for_selector": "#catalogue-end",
  "success_rules": { "fail_on_blank": true }
}