search

midzer / tobii

An accessible, open-source lightbox with no dependencies
https://midzer.github.io/tobii/demo/
MIT License
196 stars 20 forks source link

Retina optimization #86

Closed viliusle closed 2 years ago

viliusle commented 2 years ago

During image init, srcset should not be set on page load, but only when lightbox effect is called. data-srcset should be used, only only when image is loading, only then set it.

Right now having lots of 2x images for retina, browser will pre-load it even if user will not use lightbox.

Test case:

<a href="https://via.placeholder.com/600.jpg" class="lightbox" data-srcset="https://via.placeholder.com/1200.jpg 2x"> Open</a>
<a href="https://via.placeholder.com/600.jpg?2" class="lightbox" data-srcset="https://via.placeholder.com/1200.jpg?2 2x"> Open</a>
<a href="https://via.placeholder.com/600.jpg?3" class="lightbox" data-srcset="https://via.placeholder.com/1200.jpg?3 2x"> Open</a>

All 3 https://via.placeholder.com/1200.jpg will be preloaded, which is wrong. Imagine page has 83 retina images.

midzer commented 2 years ago

Gracias!