/*!
 * @license MIT
 * @author Marek Kalnik
 * @copyright (c) Maisons du Monde
 */
;(function ($, document)
{
    "use strict";

    $.fn.MDMImageViewport = function (images, settings)
    {
        if (!$.isArray(images) || images.length === 0)
        {
            throw "MDMImageViewport: You need to pass an non-empty array of image paths to viewport on instantiation";
        }

        return this.each(function ()
        {
            var container = $(this),
                config = $.extend({}, settings),
                cache,

                props = {
                    loaded:false,
                    images:[],
                    current:0,
                    nbImages:0
                },

                methods = {
                    construct:function ()
                    {
                        $(document).bind('mdm-animation.beat', methods.eventChangeImage);
                        container.addClass('mdm-image-viewport');
                        container.append('<div class="cache"></div>');
                        cache = container.children('.cache');
                        cache.hide();

                        if (config.width)
                        {
                            methods.setWidth(config.width);
                        }

                        if (config.height)
                        {
                            methods.setHeight(config.height);
                        }

                        methods.loadImages(images);
                        container.data('maxImages', props.nbImages);
                    },
                    loadImages:function (images)
                    {
                        var image = new Image(), i, len;

                        props.loaded = false;
                        props.images = images;

                        image.src = images[0];

                        image.onload = function ()
                        {
                            if (typeof config.width === 'undefined')
                            {
                                methods.setWidth('auto');
                            }
                            if (typeof config.height === 'undefined')
                            {
                                methods.setHeight('auto');
                            }
                        };
                        cache.append($(document.createElement('img')).attr({src: images[0]}));

                        for (i = 1, len = images.length; i < len; i++)
                        {
                            image = new Image();
                            image.src = images[i];
                            cache.append($(document.createElement('img')).attr({src: images[i]}));
                        }

                        props.nbImages = len;
                        props.loaded = true;
                        methods.setContainerImage(0);
                    },
                    eventChangeImage:function (event, data)
                    {
                        if (typeof props.images[data.current] !== 'undefined')
                        {
                            methods.setContainerImage(data.current);
                        }
                    },
                    setContainerImage:function (index)
                    {
                        container.find('img').first().attr('src', props.images[index]);
                    },
                    setWidth:function (width)
                    {
                        container.width(width);
                        container.find('img').first().width(width);
                    },
                    setHeight:function (height)
                    {
                        container.height(height);
                        container.find('img').first().height(height);
                    }
                };

            methods.construct();
        });
    };
})(jQuery, document);

@@ -688,16 +688,52 @@
 Images:0
+,%0A                    loadedImages:0
 %0A       
@@ -2337,32 +2337,84 @@
                %7D
+%0A%0A                            methods.imageLoaded();
 %0A               
@@ -2718,16 +2718,80 @@
 ges%5Bi%5D;%0A
+                            image.onload = methods.imageLoaded;%0A
         
@@ -2978,33 +2978,354 @@
     
-    props.loaded = true;%0A
+%7D,%0A                    imageLoaded: function()%0A                    %7B%0A                        props.loadedImages++;%0A                        if (props.loadedImages === props.nbImages)%0A                        %7B%0A                            props.loaded = true;%0A                            $(document).trigger('mdm-image-viewport.images-loaded');%0A    
     
@@ -3374,16 +3374,42 @@
 age(0);%0A
+                        %7D%0A
         

Prepare for more intelligent preloader