fix: switch lazy loading images to eager by DustinBrett · Pull Request #359 · bubkoo/html-to-image

DustinBrett · 2023-01-07T20:11:09Z

I noticed an issue with my images not loading. I traced it to neither onload or onerror firing during the embedImageNode step, which I was able to fix by changing the loading (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) attribute to eager instead of lazy as my images are.

Description

Add a condition during embedImageNode that changes lazy loading images to eager to ensure (ideally) that onload/onerror fires.

Motivation and Context

This problem occurs at least for me when I have an img which has loading (https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img#attr-loading) set to lazy. Changing this to eager stops the problem, so I've made this adjustment occur during cloning as we would not want to lazy loading images when we are trying to clone them and are waiting for them to finish decoding/loading.

Types of changes

Bug fix (non-breaking change which fixes an issue)
New feature (non-breaking change which adds functionality)
Breaking change (fix or feature that would cause existing functionality to change)
Enhancement (changes that improvement of current feature or performance)
Refactoring (changes that neither fixes a bug nor adds a feature)
Test Case (changes that add missing tests or correct existing tests)
Code style optimization (changes that do not affect the meaning of the code)
Docs (changes that only update documentation)
Chore (changes that don't modify src or test files)

Self Check before Merge

My code follows the code style of this project.
My change requires a change to the documentation.
I have updated the documentation accordingly.
I have read the CONTRIBUTING document.
I have added tests to cover my changes.
All new and existing tests passed.

codecov · 2023-01-07T20:13:12Z

Codecov Report

Base: 63.24% // Head: 63.24% // No change to project coverage 👍

Coverage data is based on head (ce892e6) compared to base (1933175).
Patch coverage: 0.00% of modified lines in pull request are covered.

Additional details and impacted files

@@           Coverage Diff           @@
##           master     #359   +/-   ##
=======================================
  Coverage   63.24%   63.24%           
=======================================
  Files          10       10           
  Lines         555      555           
  Branches      129      129           
=======================================
  Hits          351      351           
  Misses        146      146           
  Partials       58       58

Impacted Files	Coverage Δ
src/embed-images.ts	`81.81% <0.00%> (ø)`

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

## [1.11.5](v1.11.4...v1.11.5) (2023-01-30) ### Bug Fixes * **cloneCSSStyle:** rounded values of d attr fix ([#358](#358)) ([6d28bdb](6d28bdb)), closes [#357](#357) * include source in npm package ([#316](#316)) ([b609415](b609415)) * switch lazy loading images to eager ([#359](#359)) ([f7c311b](f7c311b))

biiibooo · 2023-01-30T07:54:07Z

🎉 This PR is included in version 1.11.5 🎉

The release is available on:

Your semantic-release bot 📦🚀

## [1.11.5](bubkoo/html-to-image@v1.11.4...v1.11.5) (2023-01-30) ### Bug Fixes * **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](bubkoo#358)) ([6d28bdb](bubkoo@6d28bdb)), closes [bubkoo#357](bubkoo#357) * include source in npm package ([bubkoo#316](bubkoo#316)) ([b609415](bubkoo@b609415)) * switch lazy loading images to eager ([bubkoo#359](bubkoo#359)) ([f7c311b](bubkoo@f7c311b))

# 1.0.0 (2025-09-21) ### Bug Fixes * 🐛 UMD bundle is missing local source dependencies ([bubkoo#138](https://github.com/ruediste/html-to-image/issues/138)) ([67be116](67be116)) * 🐛 [bubkoo#74](https://github.com/ruediste/html-to-image/issues/74) process reference ([bubkoo#75](https://github.com/ruediste/html-to-image/issues/75)) ([9e9d71b](9e9d71b)) * 🐛 apply css styles to svg elements ([85b2859](85b2859)) * 🐛 auto install semantic-release-config ([aff7edc](aff7edc)) * 🐛 cannot assign to read only property 'className' of object '#<… ([7d5a13b](7d5a13b)) * 🐛 cloneCSSStyle: copy transformOriginProp ([bubkoo#297](https://github.com/ruediste/html-to-image/issues/297)) ([76b978a](76b978a)) * 🐛 config changelog ([297b17f](297b17f)) * 🐛 font format could be without qoutation ([bubkoo#217](https://github.com/ruediste/html-to-image/issues/217)) ([2a96149](2a96149)) * 🐛 fontAwesome icons are not included in the resulting image on safari ([bubkoo#131](https://github.com/ruediste/html-to-image/issues/131)) ([c6ebb34](c6ebb34)) * 🐛 parse [@import](https://github.com/import) rules in fetched CSS ([bubkoo#100](https://github.com/ruediste/html-to-image/issues/100)) ([553c7e1](553c7e1)) * 🐛 process is not defined ([a2c7d03](a2c7d03)) * 🐛 publish to github package ([f0914a2](f0914a2)) * 🐛 publish to github package ([44e358e](44e358e)) * 🐛 publish to github package ([51ed412](51ed412)) * 🐛 publish to github package ([acde2cc](acde2cc)) * 🐛 push back ([f0c56f6](f0c56f6)) * 🐛 release ([807745f](807745f)) * 🐛 release config ([1032077](1032077)) * 🐛 render svg as html elements ([5e54101](5e54101)) * 🐛 set selected attribute on option to draw it ([bubkoo#280](https://github.com/ruediste/html-to-image/issues/280)) ([caf97c8](caf97c8)) * 🐛 ternary to convert slot assignedNodes to array ([bubkoo#168](https://github.com/ruediste/html-to-image/issues/168)) ([d12f4e2](d12f4e2)) * 🐛 test release ([81d9e0b](81d9e0b)) * 🐛 test release ([6d58133](6d58133)) * 🐛 test release ([8e663f2](8e663f2)) * 🐛 text breaks on the last word ([bubkoo#270](https://github.com/ruediste/html-to-image/issues/270)) ([062c98a](062c98a)) * 🐛 toCanvas scale ([bubkoo#102](https://github.com/ruediste/html-to-image/issues/102)) ([4049536](4049536)) * 🐛 update keywords ([6a04e03](6a04e03)), closes [#63](https://github.com/ruediste/html-to-image/issues/63) [bubkoo#64](https://github.com/ruediste/html-to-image/issues/64) * 🐛 use bot token ([44f9b28](44f9b28)) * 🐛 use bot token ([2917e50](2917e50)) * 🐛 use bot token ([6af2c7b](6af2c7b)) * 🐛 use bot token ([d9d8f7f](d9d8f7f)) * 🐛 use content-type to get image src type if extension is not provided in url ([bubkoo#98](https://github.com/ruediste/html-to-image/issues/98)) ([5e2da9c](5e2da9c)) * add possibility to use own handling of onerror which will not en… ([bubkoo#453](https://github.com/ruediste/html-to-image/issues/453)) ([04160c3](04160c3)) * apply skipFonts option ([6b7e923](6b7e923)), closes [bubkoo#93](https://github.com/ruediste/html-to-image/issues/93) [bubkoo#310](https://github.com/ruediste/html-to-image/issues/310) * build script ([db7d435](db7d435)) * **ci:** 🐛 👷 disable publish to github package ([b37dbe6](b37dbe6)) * **ci:** 🐛 👷 label from branch name ([e8deafb](e8deafb)) * **ci:** 🐛 👷 publish to github ([b517dca](b517dca)) * **ci:** 🐛 👷 publish to github package ([d769707](d769707)) * **ci:** 🐛 👷 publish to github package ([1d497fe](1d497fe)) * **ci:** 🐛 👷 publish To GitHub Package Registry ([523a73a](523a73a)) * **ci:** 🐛 👷 release config ([39cbcf1](39cbcf1)) * clone iframe nodes better ([bubkoo#352](https://github.com/ruediste/html-to-image/issues/352)) ([bc6b865](bc6b865)) * clone svg symbols ([bubkoo#344](https://github.com/ruediste/html-to-image/issues/344)) ([aec6fa1](aec6fa1)) * **cloneCSSStyle:** rounded values of d attr fix ([bubkoo#358](https://github.com/ruediste/html-to-image/issues/358)) ([6d28bdb](6d28bdb)), closes [bubkoo#357](https://github.com/ruediste/html-to-image/issues/357) * **config:** 🐛 ⚙️ release config ([6661037](6661037)) * **config:** 🐛 ⚙️ release config ([0f06370](0f06370)) * **config:** 🐛 ⚙️ release config ([82af212](82af212)) * ensure images are totally prcoessed before using them (ios) ([bubkoo#478](https://github.com/ruediste/html-to-image/issues/478)) ([51fb98f](51fb98f)) * fallback to `poster` when `currentSrc` of video is null ([5d79666](5d79666)) * Fix `fontEmbedCSS ` incorrect sizing ([bubkoo#422](https://github.com/ruediste/html-to-image/issues/422)) ([7020162](7020162)) * handle 404 status of fetch ([ecfdbcc](ecfdbcc)) * include source in npm package ([bubkoo#316](https://github.com/ruediste/html-to-image/issues/316)) ([b609415](b609415)) * Large Dom sizes failing to be drawn correctly into canvas when exporting to PNG ([bubkoo#197](https://github.com/ruediste/html-to-image/issues/197)) ([1ee2e7f](1ee2e7f)) * **mask:** add support for -webkit-mask and -webkit-mask-image ([bubkoo#382](https://github.com/ruediste/html-to-image/issues/382)) ([5bdfda7](5bdfda7)) * node version ([13a6989](13a6989)) * revert the change in the pre-install hook ([ed7db4d](ed7db4d)), closes [bubkoo#365](https://github.com/ruediste/html-to-image/issues/365) * specify plugins ([d90ec23](d90ec23)) * switch lazy loading images to eager ([bubkoo#359](https://github.com/ruediste/html-to-image/issues/359)) ([f7c311b](f7c311b)) * test specs ([c7a664e](c7a664e)) * type errors ([b516783](b516783)) * use "secrets.GITHUB_TOKEN" to publish to GPR ([2652288](2652288)) * use frames for video capture & add iframes ([bubkoo#346](https://github.com/ruediste/html-to-image/issues/346)) ([e316c61](e316c61)) ### Features * ✨ add 'fetchRequestInit' option ([bubkoo#210](https://github.com/ruediste/html-to-image/issues/210)) ([c51da3a](c51da3a)) * ✨ add option to skip font embed ([fd8ddde](fd8ddde)) * ✨ add some actions ([ddaa6fb](ddaa6fb)) * ✨ add svg image with href support ([bubkoo#198](https://github.com/ruediste/html-to-image/issues/198)) ([cb6f916](cb6f916)) * ✨ Add viewBox attribute to SVG ([bubkoo#146](https://github.com/ruediste/html-to-image/issues/146)) ([b4ac1d8](b4ac1d8)) * ✨ added a cache for responses to fonts ([ada98c2](ada98c2)) * ✨ added includeQueryParams flag ([bubkoo#260](https://github.com/ruediste/html-to-image/issues/260)) ([259d71e](259d71e)) * ✨ option to specify font embed css ([bubkoo#109](https://github.com/ruediste/html-to-image/issues/109)) ([6d644da](6d644da)) * ✨ option to specify preferred font format ([bubkoo#106](https://github.com/ruediste/html-to-image/issues/106)) ([740b371](740b371)) * ✨ push a release commit and tag, including configurable files ([710851e](710851e)) * ✨ to SvgDataUrl => toSvg ([bf15ff6](bf15ff6)) * ✨ update deps ([8dd487a](8dd487a)) * ✨ use app token ([ef4c60f](ef4c60f)) * support webp format ([bubkoo#343](https://github.com/ruediste/html-to-image/issues/343)) ([09d4810](09d4810)), closes [bubkoo#326](https://github.com/ruediste/html-to-image/issues/326) * **tocanvas:** ✨ adding custom width/height for exported canvas ([bubkoo#110](https://github.com/ruediste/html-to-image/issues/110)) ([aefa9f8](aefa9f8)) ### Performance Improvements * embed only used fonts ([bubkoo#476](https://github.com/ruediste/html-to-image/issues/476)) ([09bee44](09bee44)) * svg cloning optimized using deep clone ([bubkoo#462](https://github.com/ruediste/html-to-image/issues/462)) ([9aac2fd](9aac2fd))

fix: switch lazy loading images to eager

ce892e6

biiibooo bot added the PR: unreviewed label Jan 7, 2023

bubkoo approved these changes Jan 30, 2023

View reviewed changes

bubkoo merged commit f7c311b into bubkoo:master Jan 30, 2023

biiibooo bot added PR: merged and removed PR: unreviewed labels Jan 30, 2023

biiibooo bot added the released label Jan 30, 2023

istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023

fix: switch lazy loading images to eager (bubkoo#359)

a587bc9

istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023

fix: switch lazy loading images to eager (bubkoo#359)

85aa4a8

istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023

fix: switch lazy loading images to eager (bubkoo#359)

54b79aa

istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023

fix: switch lazy loading images to eager (bubkoo#359)

2e0b7d5

istaiti pushed a commit to inscreen/html-to-image that referenced this pull request Feb 7, 2023

fix: switch lazy loading images to eager (bubkoo#359)

a0b4377

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: switch lazy loading images to eager#359

fix: switch lazy loading images to eager#359
bubkoo merged 1 commit intobubkoo:masterfrom
DustinBrett:fix-lazy-loading-images

DustinBrett commented Jan 7, 2023

Uh oh!

codecov bot commented Jan 7, 2023

Uh oh!

biiibooo bot commented Jan 30, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

DustinBrett commented Jan 7, 2023

Description

Motivation and Context

Types of changes

Self Check before Merge

Uh oh!

codecov bot commented Jan 7, 2023

Codecov Report

Uh oh!

biiibooo bot commented Jan 30, 2023

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants