Merge pull request #63 from ValeryYafremau/JS-337

JS-337: [Configurable.JS] Preload all needed images

Author: uharbachou

app/code/Magento/ConfigurableProduct/view/frontend/web/js/configurable.js

@@ -7,11 +7,12 @@ define([
     'jquery',
     'underscore',
     'mage/template',
+    'mage/gallery/preloadImages',
     'priceUtils',
     'priceBox',
     'jquery/ui',
     'jquery/jquery.parsequery'
-], function ($, _, mageTemplate) {
+], function ($, _, mageTemplate, preloadImages) {
     'use strict';
 
     $.widget('mage.configurable', {
@@ -38,6 +39,10 @@ define([
             // Initial setting of various option values
             this._initializeOptions();
 
+            //Preload all gallery images
+            this._preloadImages();
+            this._preloadOptionalImages();
+
             // Override defaults with URL query parameters and/or inputs values
             this._overrideDefaults();
 
@@ -87,6 +92,43 @@ define([
             });
         },
 
+        /**
+         * Preloads default configuration images.
+         * @private
+         */
+        _preloadImages: function () {
+            var options = this.options,
+                fullImagesList = [], 
+                imagesList = [];
+
+            _.each(options.mediaGalleryInitial, function (item) {
+                imagesList.push(item.img);
+                fullImagesList.push(item.full);
+            });
+            preloadImages(imagesList);
+            preloadImages(fullImagesList);
+        },
+
+        /**
+         * Preloads optional configuration images.
+         * @private
+         */
+        _preloadOptionalImages: function () {
+            var options = this.options;
+
+            _.each(options.spConfig.images, function (array) {
+                var fullImagesList = [], 
+                    imagesList = [];
+
+                _.each(array, function (item) {
+                    imagesList.push(item.img);
+                    fullImagesList.push(item.full);
+                });
+                preloadImages(imagesList);
+                preloadImages(fullImagesList);
+            });
+        },
+
         /**
          * Override default options values settings with either URL query parameters or
          * initialized inputs values.

lib/web/mage/gallery/preloadImages.js

@@ -0,0 +1,35 @@
+/**
+ * Copyright © 2015 Magento. All rights reserved.
+ * See COPYING.txt for license details.
+ */
+define([], function () {
+
+	/**
+     * Loads images into browser's cash.
+     * @param {Array <String>} array - List of sources of images.
+     */
+    var preloadImages = function (array) {
+        if (!preloadImages.list) {
+            preloadImages.list = [];
+        }
+        var list = preloadImages.list;
+
+        for (var i = 0; i < array.length; i++) {
+            var img = new Image();
+
+            img.onload = function() {            	
+                var index = list.indexOf(this);
+
+                if (index !== -1) {
+                    list.splice(index, 1);
+                }
+            }
+
+            list.push(img);
+            img.src = array[i];
+        }
+    };
+
+    return preloadImages;
+
+});