I am building a custom photo gallery. I have a page which shows my photo large in the centre of the screen with previous and next links. The links load in the next photo over ajax and replace the currently displayed one.
Is there any way I can get the images for the previous and next photos preloading so when the user clicks either link the photo coming in displays much faster?
Check this html, it basically loads an image (but doesn't show it to the user so that when you click the link, the image loads instantly, you could try loading next and previous pics, then as the user navigates, keep adding pictures. Just make sure to add them at the end of the html, so that the rest of the page doesn't have to wait for the pics to load
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.loader {
display:none;
}
</style>
</head>
<body>
<a href="image_url">link</a>
<img class="loader" src="image_url">
</body>
</html>