f.weber/homebrewery
0
0
Fork 0
mirror of https://github.com/naturalcrit/homebrewery.git synced 2026-06-24 02:28:40 +00:00
Code Wiki Activity

Fix lazy loading Print issues

Browse Source 
When initiating the print dialog, it first grabs all img elements with `loading="lazy"` attribute, flips that to `eager`,  and then waits for every image to load before resolving a promise and opening the Print dialog.
This commit is contained in:
Gazook89
2026-04-29 23:36:58 -05:00
parent a973a5db0d
commit d04f401c90
1 changed files with 16 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files
shared/helpers.js
+16 -2
View File
@@ -105,11 +105,25 @@ const splitTextStyleAndMetadata = (brew)=>{
if(typeof brew.tags === 'string') brew.tags = brew.tags ? [brew.tags] : []; if(typeof brew.tags === 'string') brew.tags = brew.tags ? [brew.tags] : [];
}; };
const printCurrentBrew = ()=>{ const printCurrentBrew = async ()=>{
if(window.typeof !== 'undefined') { if(window.typeof !== 'undefined') {
const iframeDoc = window.frames['BrewRenderer'].contentDocument;
// get all img elements with lazy loading (currently only elements generated through MarkedJS)
const lazyImages = [...iframeDoc.querySelectorAll('img[loading="lazy"]')];
lazyImages.forEach((img)=>{ img.loading = 'eager'; });
// waits for images to load before resolving promise and opening print dialog
await Promise.all(
lazyImages
.filter((img)=>!img.complete)
.map((img)=>new Promise((resolve)=>{ img.onload = resolve; img.onerror = resolve; }))
);
window.frames['BrewRenderer'].contentWindow.print(); window.frames['BrewRenderer'].contentWindow.print();
//Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear //Force DOM reflow; Print dialog causes a repaint, and @media print CSS somehow makes out-of-view pages disappear
const node = window.frames['BrewRenderer'].contentDocument.getElementsByClassName('brewRenderer').item(0); const node = iframeDoc.getElementsByClassName('brewRenderer').item(0);
node.style.display='none'; node.style.display='none';
node.offsetHeight; // accessing this is enough to trigger a reflow node.offsetHeight; // accessing this is enough to trigger a reflow
node.style.display=''; node.style.display='';