Skip to content

Commit

Permalink
[zmarkdown] Lazy-load images (#505)
Browse files Browse the repository at this point in the history
  • Loading branch information
@StaloneLab
StaloneLab authored Jan 14, 2024
1 parent 28b2196 commit ee1e046
Show file tree
Hide file tree
Showing 6 changed files with 41 additions and 24 deletions.
10 changes: 5 additions & 5 deletions packages/zmarkdown/__tests__/__snapshots__/html-suite.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -84,13 +84,13 @@ exports[`code highlight special cases supports linenostart 1`] = `
`;
exports[`images become figures: does not apply when a caption is present 1`] = `
"<figure><img src=\\"http://example.com\\" alt=\\"foo\\"><figcaption>foo</figcaption></figure>
<figure><img src=\\"http://example.com\\"><figcaption>Caption</figcaption></figure>
<figure><img src=\\"http://example.com\\" alt=\\"foo\\"><figcaption>Caption</figcaption></figure>
<figure><img src=\\"http://example.com\\"><figcaption></figcaption></figure>"
"<figure><img src=\\"http://example.com\\" alt=\\"foo\\" loading=\\"lazy\\"><figcaption>foo</figcaption></figure>
<figure><img src=\\"http://example.com\\" loading=\\"lazy\\"><figcaption>Caption</figcaption></figure>
<figure><img src=\\"http://example.com\\" alt=\\"foo\\" loading=\\"lazy\\"><figcaption>Caption</figcaption></figure>
<figure><img src=\\"http://example.com\\" loading=\\"lazy\\"><figcaption></figcaption></figure>"
`;
exports[`images become figures: works with only an image 1`] = `"<figure><img src=\\"http://blabla.fr\\" alt=\\"wrapped into _figure_\\"><figcaption>wrapped into _figure_</figcaption></figure>"`;
exports[`images become figures: works with only an image 1`] = `"<figure><img src=\\"http://blabla.fr\\" alt=\\"wrapped into _figure_\\" loading=\\"lazy\\"><figcaption>wrapped into _figure_</figcaption></figure>"`;
exports[`pedantic mode disabled unordered lists markers 1`] = `
"<ul>
Expand Down
30 changes: 15 additions & 15 deletions packages/zmarkdown/__tests__/__snapshots__/legacy-suite.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -56,9 +56,9 @@ Here's an inline \\\\externalLink{link}{http://zestedesavoir.com/script?foo=1\\\
exports[`basic renders angle-links-and-img.txt 1`] = `
"<p><a href=\\"simple%20link\\" title=\\"my title\\">link</a>
<img src=\\"http://example.com/image.jpg\\" alt=\\"image\\">
<img src=\\"http://example.com/image.jpg\\" alt=\\"image\\" loading=\\"lazy\\">
<a href=\\"http://example.com/(()((())923)(\\">link</a>
<img src=\\"link(()))(\\" alt=\\"image\\"></p>"
<img src=\\"link(()))(\\" alt=\\"image\\" loading=\\"lazy\\"></p>"
`;
exports[`basic renders angle-links-and-img.txt 2`] = `
Expand Down Expand Up @@ -4159,15 +4159,15 @@ xxx xxx xxx xxx xxx xxx xxx xxx"
`;
exports[`misc renders brackets-in-img-title.txt 1`] = `
"<p><img src=\\"local-img.jpg\\" alt=\\"alt\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"normal title\\"></p>
<p><img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"(just title in brackets)\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"title with brackets (I think)\\"></p>
<p><img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"(\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"(open only\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\")\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"close only)\\"></p>"
"<p><img src=\\"local-img.jpg\\" alt=\\"alt\\" loading=\\"lazy\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" loading=\\"lazy\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"normal title\\" loading=\\"lazy\\"></p>
<p><img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"(just title in brackets)\\" loading=\\"lazy\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"title with brackets (I think)\\" loading=\\"lazy\\"></p>
<p><img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"(\\" loading=\\"lazy\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"(open only\\" loading=\\"lazy\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\")\\" loading=\\"lazy\\">
<img src=\\"local-img.jpg\\" alt=\\"alt\\" title=\\"close only)\\" loading=\\"lazy\\"></p>"
`;
exports[`misc renders code-first-line.txt 1`] = `
Expand Down Expand Up @@ -4401,8 +4401,8 @@ exports[`misc renders h1.txt 2`] = `
`;
exports[`misc renders image.txt 1`] = `
"<figure><img src=\\"http://humane_man.jpg\\" alt=\\"Poster\\" title=\\"The most humane man.\\"><figcaption>Poster</figcaption></figure>
<p><img src=\\"http://humane_man.jpg\\" alt=\\"Poster\\" title=\\"The most humane man.\\"></p>
"<figure><img src=\\"http://humane_man.jpg\\" alt=\\"Poster\\" title=\\"The most humane man.\\" loading=\\"lazy\\"><figcaption>Poster</figcaption></figure>
<p><img src=\\"http://humane_man.jpg\\" alt=\\"Poster\\" title=\\"The most humane man.\\" loading=\\"lazy\\"></p>
<figure><img src=\\"\\" alt=\\"Blank\\"><figcaption>Blank</figcaption></figure>"
`;
Expand All @@ -4419,7 +4419,7 @@ exports[`misc renders image.txt 2`] = `
\\\\image{}[Blank]"
`;
exports[`misc renders image_in_links.txt 1`] = `"<p><a href=\\"path/to/image.png\\"><img src=\\"path/to/img_thumb.png\\" alt=\\"altname\\"></a></p>"`;
exports[`misc renders image_in_links.txt 1`] = `"<p><a href=\\"path/to/image.png\\"><img src=\\"path/to/img_thumb.png\\" alt=\\"altname\\" loading=\\"lazy\\"></a></p>"`;
exports[`misc renders image_in_links.txt 2`] = `"\\\\externalLink{\\\\image{path/to/img_thumb.png}}{path/to/image.png}"`;
Expand Down Expand Up @@ -6482,7 +6482,7 @@ exports[`zds renders emoticons.txt 1`] = `
<p>Citation</p>
</blockquote>
<p><img src=\\"/static/smileys/svg/heureux.svg\\" alt=\\":D\\" class=\\"smiley\\"> Ce n'est pas une légende</p>
<figure><img src=\\"https://zestedesavoir.com/media/galleries/3014/bee33fae-2216-463a-8b85-d1d9efe2c374.png\\" alt=\\"toto\\"><figcaption>toto</figcaption></figure>
<figure><img src=\\"https://zestedesavoir.com/media/galleries/3014/bee33fae-2216-463a-8b85-d1d9efe2c374.png\\" alt=\\"toto\\" loading=\\"lazy\\"><figcaption>toto</figcaption></figure>
<p><img src=\\"/static/smileys/svg/heureux.svg\\" alt=\\":D\\" class=\\"smiley\\"> ce n'est pas une légende non plus</p>"
`;
Expand Down
4 changes: 2 additions & 2 deletions packages/zmarkdown/__tests__/__snapshots__/server.test.js.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -29,8 +29,8 @@ exports[`HTML endpoint produces statistics when configured 1`] = `
"<p>7 chars</p>
<h3 id=\\"13-chars-here\\">13 chars here<a aria-hidden=\\"true\\" tabindex=\\"-1\\" href=\\"#13-chars-here\\"><span class=\\"icon icon-link\\"></span></a></h3>
<p><a href=\\"https.//github.com/zestedesavoir/zmarkdown\\">13 chars here</a></p>
<figure><img src=\\"https.//github.com/zestedesavoir/zmarkdown\\" alt=\\"13 chars here\\"><figcaption>13 chars here</figcaption></figure>
<figure><img src=\\"https.//github.com/zestedesavoir/zmarkdown\\" alt=\\"no chars here\\"><figcaption>13 chars here</figcaption></figure>"
<figure><img src=\\"https.//github.com/zestedesavoir/zmarkdown\\" alt=\\"13 chars here\\" loading=\\"lazy\\"><figcaption>13 chars here</figcaption></figure>
<figure><img src=\\"https.//github.com/zestedesavoir/zmarkdown\\" alt=\\"no chars here\\" loading=\\"lazy\\"><figcaption>13 chars here</figcaption></figure>"
`;
exports[`LaTeX endpoint accepts POSTed markdown 1`] = `
Expand Down
1 change: 1 addition & 0 deletions packages/zmarkdown/config/html/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,7 @@ module.exports = {
postProcessors: {
iframeWrappers: require('./iframe-wrappers'),
footnotesReorder: true,
lazyLoadImages: true,
wrapCode: true,
},
}
15 changes: 15 additions & 0 deletions packages/zmarkdown/postprocessors/html-lazy-load-images.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,15 @@
const visit = require('unist-util-visit')

module.exports = () => tree => {
visit(tree, node => {
if (node.type !== 'element' ||
node.tagName !== 'img' ||
!node.properties.src) return

// Ignore smileys, which may be eagerly loaded
if (node.properties.class &&
node.properties.class.includes('smiley')) return

node.properties.loading = 'lazy'
})
}
5 changes: 3 additions & 2 deletions packages/zmarkdown/renderers/html.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -18,9 +18,10 @@ const defaultStringifierList = {
require('katex/dist/contrib/mhchem')

const postProcessorList = {
wrapCode: require('../postprocessors/html-wrap-code'),
iframeWrappers: require('../postprocessors/html-iframe-wrappers'),
footnotesReorder: require('../postprocessors/html-footnotes-reorder'),
iframeWrappers: require('../postprocessors/html-iframe-wrappers'),
lazyLoadImages: require('../postprocessors/html-lazy-load-images'),
wrapCode: require('../postprocessors/html-wrap-code'),
}

module.exports = (tokenizer, config) => {
Expand Down

0 comments on commit ee1e046

Please sign in to comment.