Preload Large Gallery/slider Images In Html

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

Solution 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 preloadedvar preloadedImage = $(newImage()).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 onepreloadImages(imageIndex + 1);
  });
}

// Start preloading the first imagepreloadImages(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.

<divclass="images"><divclass="image"data-index="1"data-src="image_1_source_path"></div><divclass="image"data-index="2"data-src="image_2_source_path"></div><divclass="image"data-index="3"data-src="image_3_source_path"></div><divclass="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 + "]");
  returnif imageContainer.length === 0var preloadedImage = $(newImage()).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.