Closed medallyon closed 7 years ago
Probably something along the lines of
$(document).ready(fn()
{
$("#background").css("background-image", "hiRez.png");
});```
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(...)'
})
})
Would this not be even worse, for it now has to load the low-rez and the high-rez images?
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.
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.
fixed with c46c6a8363c8e0291a624a11d3584111d1992c99
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