offbyn
/
nostrweb
forked from nostr/nostrweb
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

noxy: add lazy load attribute to noxy images 

Only for browsers that support loading=lazy attribute, but this
should reduce the load on noxy and only fetch images that are
relevant (in the viewport of close to it).
OFF0 2022-12-10 12:21:05 +01:00
parent 9250ccf287
commit a580bc67b2
Signed by: offbyn
GPG Key ID: 94A2F643C51F37FA
1 changed files with 4 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/main.js
View File

@ -171,7 +171,7 @@ const getNoxyUrl = (type, url, id, relay) => {
function linkPreview(href, id, relay) { function linkPreview(href, id, relay) {
if ((/\.(gif|jpe?g|png)$/i).test(href)) { if ((/\.(gif|jpe?g|png)$/i).test(href)) {
return elem('div', {}, return elem('div', {},
[elem('img', {className: 'preview-image-only', src: getNoxyUrl('data', href, id, relay).href})] [elem('img', {className: 'preview-image-only', loading: 'lazy', src: getNoxyUrl('data', href, id, relay).href})]
); );
} }
const noxy = getNoxyUrl('meta', href, id, relay); const noxy = getNoxyUrl('meta', href, id, relay);
@ -182,7 +182,7 @@ function linkPreview(href, id, relay) {
const container = document.getElementById(previewId); const container = document.getElementById(previewId);
container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, [ container.append(elem('a', {href, rel: 'noopener noreferrer', target: '_blank'}, [
meta.images[0] && ( meta.images[0] && (
elem('img', {className: 'preview-image', src: getNoxyUrl('data', meta.images[0], id, relay).href}) elem('img', {className: 'preview-image', loading: 'lazy', src: getNoxyUrl('data', meta.images[0], id, relay).href})
), ),
elem('h2', {className: 'preview-title'}, meta.title), elem('h2', {className: 'preview-title'}, meta.title),
elem('p', {className: 'preview-descr'}, meta.descr), elem('p', {className: 'preview-descr'}, meta.descr),
@ -435,8 +435,9 @@ function getMetadata(evt, relay) {
const userName = name || evt.pubkey.slice(0, 8); const userName = name || evt.pubkey.slice(0, 8);
const userAbout = user?.metadata[relay]?.about || ''; const userAbout = user?.metadata[relay]?.about || '';
const img = userImg ? elem('img', { const img = userImg ? elem('img', {
src: userImg,
alt: `${userName} ${host}`, alt: `${userName} ${host}`,
loading: 'lazy',
src: userImg,
title: `${userName} on ${host} ${userAbout}`, title: `${userName} on ${host} ${userAbout}`,
}) : elemCanvas(evt.pubkey); }) : elemCanvas(evt.pubkey);
const isReply = evt.tags.some(hasEventTag); const isReply = evt.tags.some(hasEventTag);