medallyon / grogsile.org-archive

The (old) Official Bot For ESO International
https://discordapp.com/invite/0jGipOeWW06jNmlL
Apache License 2.0
1 stars 0 forks source link

/ takes too long to load for @jndachenhaus #37

Closed medallyon closed 7 years ago

medallyon commented 7 years ago

The main page takes a while to load, so when you can get around to it I would suggest loading the page with a lower res version of the images and replacing them once the high res versions have loaded in the background

medallyon commented 7 years ago

Probably something along the lines of


$(document).ready(fn()
{
  $("#background").css("background-image", "hiRez.png");
});```
dachendev commented 7 years ago

This is probably closer to the way I would do it. It can also load a medium quality image so that the resolution slowly improves if it continues to load too slowly.

.site-wrapper {
    /* Low quality image source */
    background-image: url(...);
}
<!-- Pre-load high quality image -->
<img id="bkgd_highQuality" style="display: none;" src="..." />
// Replace low quality image with high quality once loaded
$('#bkgd_highQuality').off().on('load', function() {
    $('.site-wrapper').css({
        'background-image': 'url(...)'
    })
})
medallyon commented 7 years ago

Would this not be even worse, for it now has to load the low-rez and the high-rez images?

medallyon commented 7 years ago

Also, I'm not sure what functions or events are available to me that identify a user's (slow) connection, if there even exists something like this.

dachendev commented 7 years ago

It should load the high quality image in the background (hidden) while the rest of the page continues to load normally. It should not make it worse, especially since the low quality image would take a fraction of a second to load. Although this could make load times of those on high speed connections a few milliseconds slower, it would look much better for those on slower connections and would be better off in the long run.

medallyon commented 7 years ago

fixed with c46c6a8363c8e0291a624a11d3584111d1992c99