Hi:
I created a photography portfolio for myself: http://www.photography.tommcpadden.com/gallery
The Situation:
The photos in the gallery index are backgrounds images so they can fluidly change with the resolution while all being the same size and maintain ratio.
But the photos in the gallery index are too big and take too long to load. They are 1000px in width on the desktop, and 700px in width on phones/tablets. To solve this issue, I created smaller versions of lower quality, hence file size, to load in an element underneath so the visitor has something to look at while the higher quality photo is loading, which works perfectly!
The problem:
The problem is that the browser sometimes loads the larger background image first, making this pointless.
The Code:
<li>
<a href="LINK HERE">
<div class="photobg" style="backgrond:url('small.jpg');">
<div class="photobg" style="backgrond:url('big.jpg');"></div>
</div>
</a>
</li>
As you can see, both DIV tags have a background image, one over the other so that the small image will be replaced by the big image when the big image loads.
The Goal:
I want to load the small background images before the big background images so the visitor has something to look at while the big ones are loading.
If you have an alternative solution, I'd be happy to hear it.
Thank you for your time :)
