Lazy geladene Inhalte im Ganzseiten-Screenshot erfassen

Eine Ganzseiten-Aufnahme fotografiert das ganze Dokument auf einmal, doch ein Browser lädt Lazy-Inhalte nur in der Nähe des Bereichs, den man gerade ansieht. Bilder mit loading="lazy" und Abschnitte, die ein IntersectionObserver füllt, bleiben Platzhalter: Der obere Teil des Bildes stimmt, der Rest besteht aus grauen Kästen.

Auf einer Testseite ansehen

Die Testseite unten hat sechs Abschnitte, die sich erst füllen, wenn sie sichtbar sind. Laden Sie sie herunter und senden Sie sie als html, um beide Ergebnisse selbst zu sehen.

• lazy-page.html: sechs Abschnitte, die beim Sichtbarwerden laden, ohne Netzwerkanfragen, sodass das Ergebnis jedes Mal gleich ist

Die Seite vorher scrollen lassen

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

Mit full_page_readiness auf scroll wird die Seite vor der Aufnahme Viewport für Viewport nach unten durchlaufen. Jeder Schritt wartet bis zu 750 ms auf die Bilder, die er sichtbar gemacht hat; danach kehrt der Durchlauf nach oben zurück und wartet bis zu 2 Sekunden auf die Bilder innerhalb der Aufnahme. Der ganze Durchlauf dauert höchstens 10 Sekunden und 60 Schritte.

Aufgenommen wird weiterhin von oben, sodass ein Sticky-Header einmal oben erscheint und nicht dort, wo der Durchlauf ihn zurückgelassen hat.

Die Warnungen lesen

Ein Durchlauf, der nicht ganz reicht, ist kein Fehlschlag: Die Aufnahme gelingt, und der Header X-Ironfang-Warnings sagt, was unvollständig war. Ein Job enthält dasselbe in diagnostics.readiness.

• scroll_budget_exhausted: Dem Durchlauf gingen Zeit oder Schritte aus, bevor er das Ende der Aufnahme erreichte.
• images_incomplete: Bilder innerhalb der Aufnahme luden noch, als die Wartezeit endete.
• images_broken: Bilder innerhalb der Aufnahme konnten nicht geladen werden. Das ist die Seite, so aufgenommen, wie sie ist.
• height_capped: Die Seite war höher als full_page_max_height, und die Aufnahme wurde dort abgeschnitten.

Wenn Scrollen nicht reicht

Manche Inhalte warten auf etwas anderes als die Scrollposition: einen langsamen API-Aufruf oder eine Liste, die nach dem letzten Abschnitt lädt. Warten Sie auf ein Element, das erst existiert, wenn alles da ist, und fügen Sie eine Erfolgsregel hinzu, damit eine leere Aufnahme abgelehnt statt geliefert wird.

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