Skip to content

Media fails to load if loading attribute is lazy #150

@nextend

Description

@nextend

Hi! 👋

Firstly, thanks for your work on this project! 🙂

Today I used patch-package to patch modern-screenshot@4.6.6 for the project I'm working on.

In this case media is a HTMLImageElement which has loading="lazy" attribute. It cause the media to wait the timeout and never loads.

Here is the diff that solved my problem:

diff --git a/node_modules/modern-screenshot/dist/index.mjs b/node_modules/modern-screenshot/dist/index.mjs
index e3c44f8..5d51913 100644
--- a/node_modules/modern-screenshot/dist/index.mjs
+++ b/node_modules/modern-screenshot/dist/index.mjs
@@ -226,6 +226,10 @@ function loadMedia(media, options) {
   return new Promise((resolve) => {
     const { timeout, ownerDocument, onError: userOnError, onWarn } = options ?? {};
     const node = typeof media === "string" ? createImage(media, getDocument(ownerDocument)) : media;
+
+    node.decoding = "sync";
+    node.loading = "eager";
+
     let timer = null;
     let removeEventListeners = null;
     function onResolve() {

This issue body was partially generated by patch-package.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions