如何使用javascript正确加载图像？

Question

嗨，我的网站在滑块中，当图像数量为1时，加载图像需要一些时间  and this is the link to check what happens
我已经尝试了很多方法，但却什么都没有。我认为问题出在我的代码上 以下是我的示例javascript和html代码：

function displayImageCarousel($item) {
if (!$.fn.flexslider || $item.length < 1 || $item.is(":hidden")) {
    return;
}
var dataAnimation = $item.data("animation");
var dataItemWidth = $item.data("item-width");
var dataItemMargin = $item.data("item-margin");
var dataSync = $item.data("sync");
if (typeof dataAnimation == "undefined") {
    dataAnimation = "slide";
}
if (typeof dataItemWidth == "undefined") {
    dataItemWidth = 70;
}
if (typeof dataItemMargin == "undefined") {
    dataItemMargin = 10;
}
dataItemWidth = parseInt(dataItemWidth, 10);
dataItemMargin = parseInt(dataItemMargin, 10);

var dataAnimationLoop = true;
var dataSlideshow = false;
if (typeof dataSync == "undefined") {
    dataSync = "";
    //dataAnimationLoop = true;
    dataSlideshow = true;
}
$item.flexslider({
    animation: dataAnimation,
    controlNav: true,
    animationLoop: dataAnimationLoop,
    slideshow: dataSlideshow,
    itemWidth: dataItemWidth,
    itemMargin: dataItemMargin,
    minItems: 2,
    pauseOnHover: true,
    asNavFor: dataSync,
    start: function (slider) {
        if (dataSync != "") {
            $(slider).find(".slides > li").height(dataItemWidth);
            $(slider).find(".slides > li > img").each(function () {
                if ($(this).width() < 1) {
                    $(this).load(function () {
                        $(this).parent().middleblock();
                    });
                } else {
                    $(this).parent().middleblock();
                }
            });
        } else {
            $(slider).find(".middle-block img, .middle-block .middle-item").each(function () {
                if ($(this).width() < 1) {
                    $(this).load(function () {
                        $(this).closest(".middle-block").middleblock();
                    });
                } else {
                    $(this).closest(".middle-block").middleblock();
                }
            });
        }
    },
    after: function (slider) {
        if (slider.currentItem == 0) {
            target = 0;
            if (slider.transitions) {
                target = (slider.vars.direction === "vertical") ? "translate3d(0," + target + ",0)" : "translate3d(" + target + ",0,0)";
                slider.container.css("-" + slider.pfx + "-transition-duration", "0s");
               // slider.container.css("transition-duration", "0s");
            }
            slider.args[slider.prop] = target;
            slider.container.css(slider.args);
            slider.container.css('transform', target);
        }
    }

});

html代码：

 <div class="tab-content">
                <div id="photos-tab" style="min-height:500px" class="tab-pane fade in active">
                    <div class="photo-gallery style1" data-animation="slide" data-sync="#photos-tab .image-carousel">
                        <ul class="slides">
                            @foreach (var item in Model.PhotoTables)
                            {
                                <li>
                                    <img src="@System.Configuration.ConfigurationManager.AppSettings["Image900x500"]@item.PhotoName" alt="" />
                                </li>
                            }
                        </ul>
                    </div>
                    <div class="image-carousel style1" data-animation="slide" data-item-width="70" data-item-margin="10" data-sync="#photos-tab .photo-gallery">
                        <ul class="slides">
                            @foreach (var item in Model.PhotoTables)
                            {
                            <li>
                                <img src="@System.Configuration.ConfigurationManager.AppSettings["Image70x70"]@item.PhotoName" alt="" />
                            </li>
                            }
                        </ul>
                    </div>
                    </div>
                </div>