以块的形式获取数据

Question

我有一个我建立的旋转木马，它从我的API获取产品列表，然后每个产品在旋转木马中创建为幻灯片。这一切都很完美。

当前幻灯片变为活动状态时，我会下载该幻灯片的所有图像并填充幻灯片。此数据也来自API。

我想要做的是更快速地做到这一点。目前我正在加载这些一个，因为它们变得“活跃”。理想情况下，我希望能够立即加载5。这样，数组（0）的起始位于加载数组的中心。然后，当用户向左或向右导航旋转木马时，我想向前或向后拨打下一个旋转木马。

到目前为止，我的代码工作正常，当幻灯片处于活动状态时，它将加载所有图片，我在此处使用的代码就在这里：

module.carousel = (function(){
    "use strict";
    var exports = {};

    exports.details = {};

    exports.init = function (options) {
        var defaultOptions = {
            speed: 1500,
            next: {},
            back: {},
            target: {}
        };
        if(options == null) options = {};
        options = $.extend(defaultOptions, options);

        exports.details.targetLength = options.target.children('li').length - 1;
        exports.details.position = 0;
        exports.details.products = options.target.children('li');

        options.target.children('li:nth-child(' + (exports.details.position + 1) + ')').addClass('active');
        exports.details.position += 1;

        getMedia();

        function removeActive() {
            options.target.children('li.active').removeClass('active');
        }

        function addActive() {
            options.target.children('li:nth-child(' + (exports.details.position) + ')').addClass('active');
        }

        function nextItem() {
            if(exports.details.position >= exports.details.targetLength + 1) {
                exports.details.position = 1;
            } else {
                exports.details.position += 1;
            }

            removeActive();
            addActive();
            getMedia();
        }

        function getMedia() {
            var id = options.target.children('li.active').attr('data-id');
            $.ajax({
                url: "/beta/api/v1/watches/id/" + id + "/media",
                dataType: "json",
                async: false,
                success: function(data) {
                    var mediaItems = "";
                    for(var x = 0, tot = data.length; x < tot; x++) {
                        mediaItems += "<div class='box'><img src='" + data[x] + "' class='intro-image'></div>";
                    }
                    $('#' + id + '_media').html(mediaItems);
                }
            });
        }

        function previousItem() {
            if(exports.details.position === 1) {
                exports.details.position = exports.details.targetLength + 1;
            } else {
                exports.details.position -= 1;
            }

            removeActive();
            addActive();
            getMedia();
        }

        $('html, body').on('swipeleft', function(event) {
            event.stopPropagation();
            nextItem();
        });

        $('html, body').on('swiperight', function(event) {
            event.stopPropagation();
            previousItem();
        });

    };

    return exports;
}());

这就是我的 carousel 的工作方式，这就是我启动它的方式：

    $(document).ready(function() {
        $.getJSON("/beta/api/v1/watches", function(data) {
            var productArray = [];
            for(var i = 0, tot = data.length; i < tot; i++){
                var productItem = "";
                    if(i === 0) {
                        productItem += "<li data-id='" + data[i].id + "' class='product active'>";
                    } else {
                        productItem += "<li data-id='" + data[i].id + "' class='product'>";
                    }
                    productItem += "<div class='product-header'><h3>" 
                        + data[i].name + "</h3><h3>" + data[i].case_finish 
                        + "</h3><h3>" + data[i].id + "</h3><h3>£" + data[i].price + "</h3></div>";

                    var product = data[i];
                    productItem += "<div id='" + data[i].id + "_media'></div>";
                    productItem += "</li>";

                productArray.push(productItem);
            }
            $('#carousel').html(productArray);
            $(document).on('swipeleft swiperight', function(event) {
                event.stopImmediatePropagation();
            });
            module.carousel.init({
                target: $('#carousel'),
                next:   $('#next'),
                back:   $('#back')
            });
        });
    });