mirror/php-flarum
1
0
Fork 0
mirror of https://github.com/flarum/core.git synced 2025-08-07 08:56:38 +02:00
Code Issues Releases Wiki Activity

Add lazy loading attribute to twemoji rendered images & autocomplete (#31)

Browse Source
This commit is contained in:
David Sevilla Martín
2020-10-15 18:50:00 -04:00
committed by GitHub
parent 1b08d47f6e
commit 97c89bcc42
2 changed files with 10 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
extensions/emoji/js/src/forum/addComposerAutocomplete.js
View File

@@ -77,7 +77,7 @@ export default function addComposerAutocomplete() {
onmouseenter={function() { onmouseenter={function() {
dropdown.setIndex($(this).parent().index() - 1); dropdown.setIndex($(this).parent().index() - 1);
}}> }}>
<img alt={emoji} class="emoji" draggable="false" src={`${cdn}72x72/${code}.png`}/> <img alt={emoji} class="emoji" draggable="false" loading="lazy" src={`${cdn}72x72/${code}.png`}/>
{name} {name}
</button> </button>
); );

11
extensions/emoji/js/src/forum/renderEmoji.js
View File

@@ -7,12 +7,19 @@ import Post from 'flarum/models/Post';
import base from './cdn'; import base from './cdn';
const options = {
base,
attributes: () => ({
loading: 'lazy',
}),
};
export default function renderEmoji() { export default function renderEmoji() {
override(Post.prototype, 'contentHtml', function(original) { override(Post.prototype, 'contentHtml', function(original) {
const contentHtml = original(); const contentHtml = original();
if (this.oldContentHtml !== contentHtml) { if (this.oldContentHtml !== contentHtml) {
this.emojifiedContentHtml = twemoji.parse(contentHtml, { base }); this.emojifiedContentHtml = twemoji.parse(contentHtml, options);
this.oldContentHtml = contentHtml; this.oldContentHtml = contentHtml;
} }
@@ -22,6 +29,6 @@ export default function renderEmoji() {
override(s9e.TextFormatter, 'preview', (original, text, element) => { override(s9e.TextFormatter, 'preview', (original, text, element) => {
original(text, element); original(text, element);
twemoji.parse(element, { base }); twemoji.parse(element, options);
}); });
} }