Wait for lazy loaded elements when using the `fullPage` option about capture-website HOT 7 CLOSED

If it’s lazy loaded, how will capture-website even know about it?

from capture-website.

Well, I'm not familiar with Puppeteer and if the scenario I have in my head is possible or not but for me it looks like this:

1. capture-website opens website
2. Waits until all resources are loaded
3. Scrolls it to the bottom to trigger all lazy loading elements
4. Waits until they are loaded
5. Makes a screenshot of the page

It should work like that if fullPage is set to `true. If it's not, then steps 3 and 4 should be skipped.

By the way, I'm willing to help, especially with issue #1, but as I already said, I'm not really familiar with Puppeteer or how capture-website works. If there is something that can help me to roll into the project easier, I would be thankful for sharing.

from capture-website.

What you're describing is ideally how the fullPage option should work by default.

from capture-website.

@issuehunt has funded $60.00 to this issue.

• Submit pull request via IssueHunt to receive this reward.
• Want to contribute? Chip in to this issue via IssueHunt.
• Checkout the IssueHunt Issue Explorer to see more funded issues.
• Need help from developers? Add your repository on IssueHunt to raise funds.

from capture-website.

I can handle this easily. Do you still need help? Let me know, thanks.

from capture-website.

Got any examples of websites this should work with? What if the website features endless scrolling?

EDIT: Nvm... Here are some clues https://github.com/sindresorhus/capture-website/issues1.

For FIXED elements,

a) Open the page in a particular viewport width(W) and height(H) and then capture the screenshot of the viewport only.
b) Scroll the page horizontally(W+W) and take the screenshots until fully scrolled horizontally.
c) Now scroll vertically(H+H) and take the screenshot.
d) Repeat steps (b) and (c)
e) Now smartly stitch the images in such a way it looks like a full-page screenshot.
f) For tackling FIXED elements, after taking the very first screenshot, remove them from page otherwise they will repeat in every screenshot and will cause noise.

2. For INFINITE scroll

a) Scroll the page to the bottom
b) Check if height is increased because of lazy-included elements at the bottom
c) Repeat (a) and (b) until height is not increasing or the MAX_SCREENSHOT_HEIGHT is reached.
d) Now apply the same strategy as mentioned above

Hope this might help.

Let me know if I could help in this. It would be great to work with you someday.

Originally posted by @softvar in #1 (comment)

Maybe it should also be added as a new config property.

from capture-website.

@sindresorhus has rewarded $54.00 to @netrules. See it on IssueHunt

• 💰 Total deposit: $60.00
• 🎉 Repository reward(0%): $0.00
• 🔧 Service fee(10%): $6.00

from capture-website.