preload large gallery/slider images in HTML - html

Question

I have large, wide images within a portfolio page. The images are saved "progressive" and they load fine.
I was wondering if there's a way though to kind of preload those images to make them appearing faster and smoother. Or maybe there's a way to preload all the other pages and images into the cache so that at least all the following pages after the first appear smooth and fast? Whatever helps to make the pages load faster and smoother.
Any suggestions?
Each image consists of a variety of images, all of them within one wide image (prepared in PSD) and the visitor can shift left and right to call for the respective image to appear in the center.
Unfortunately sacrificing on the image quality or make them smaller is not an option here.
I know there are posts here on preloading images ad stuff but I can't find any that work with the image embedded in the HTML code.
Please have merci, I'm a CSS and Javascript novice, so the simpler the more likely I'll understand it. I'm afraid breaking up the images in single instances (make it a row of images instead of one whole image), place them in a floated div and change the respective Javascript code could be too challenging for me, right...? How else could I do that?
Appreciated!
Here's what I have (I guess it would be overkill to post all my HTML, Javascript and CSS here, I'll post some). The large images are placed within the HTML page and called via Javascript.
see here
<div class="ShiftGroup">
<div class="ShiftGroupC">
<div class="ShiftGroupI"><div id="ShiftGalleryFive"><img src="images/gallery_anzic1.png" width="3348" height="372" alt="imagegallery1" /></div></div>
<div class="ShiftGroupP" style="margin-left: -990px;"><div id="ShiftLeft" class="ShiftGroupD"><span class="pointer"><img src="images/arrowleft.png" width="78" height="50" alt="arrowsleft" /></span></div></div>
<div class="ShiftGroupP" style="margin-left: 341px;"><div id="ShiftRight" class="ShiftGroupD"><span class="pointer"><img src="images/arrowright.png" width="78" height="50" alt="arrowright" /></span></div></div>
and
gallery = document.getElementById('ShiftGalleryFour').style;

Answer 1

This is how we preloaded images in one of our projects:
preloadImages = function(imageIndex) {
// Finds div element containing index (1..n) and url of image
// (both stored as data attributes)
var image = $(".data .image[data-index=" + imageIndex + "]");
// Creates an image (just virtually) that is not embedded to HTML.
// Its source is the url of the image that is to be preloaded
var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url"));
// Bind an event to the "virtual" image to start preloading next image when
// this one is done
preloadedImage.load(function() {
// Start preloading the next one
preloadImages(imageIndex + 1);
});
}
// Start preloading the first image
preloadImages(1)
In your case this solves only one part of the problem - preloading.
I see you include all images in html as img tags. If you want to achieve better performance, do not place any img tags in your html of the gallery. Just div tags that will become the future containers of your images. These divs may have indexes and contain data attributes with image urls (as seen in my example). When your page gets loaded, start preloading procedure. When an "virtual image" gets loaded. Create new image tag inside its container and start preloading the next image.
This will definitely cut off the download time of your page.
My example uses jQuery which simplifies the script. Pure javascript would be more complicated.
UPDATE:
This is how preloading example may work like.
HTML
Let's say you have 4 images and all of them has its container - a div in which individual image is to be placed.
<div class="images">
<div class="image" data-index="1" data-src="image_1_source_path"></div>
<div class="image" data-index="2" data-src="image_2_source_path"></div>
<div class="image" data-index="3" data-src="image_3_source_path"></div>
<div class="image" data-index="4" data-src="image_4_source_path"></div>
</div>
JavaScript
After the the document is loaded, preloading procedure may start. You start by preloading the first image. After this one is loaded, you append it to its container and trigger preloading of the next image. There is also return called if all images are loaded and no container is found.
preloadImages = function(imageIndex) {
var imageContainer = $(".images .image[data-index=" + imageIndex + "]");
return if imageContainer.length === 0
var preloadedImage = $(new Image()).attr("src", image.attr("data-full-url"));
preloadedImage.load(function() {
imageContainer.append(preloadedImage);
preloadImages(imageIndex + 1);
});
}
$(document).ready(function(){
preloadImages(1);
});
Hopefully you get the idea.