jquery - jQueryを使用して最初の画像をロードした後、すべての画像をロードします

Question

jQueryカルーセル用に一度に5つの画像をロードしていますが、最初の1つだけをロードし、後で1つの画像がロードされたときに他の4つの画像をロードしたいのですが、jQueryでこれを行うにはどうすればよいですか.

各解像度に画像が収まるので以下のcssを適用しています。

コードは以下のとおりです。head セクションでも jQuery.1.4.1.min.js を使用しました。

<div align="center" id="conatier">
    <img src="/Images/home/Movie_Color_1.jpg" class="bg" style="display: block" id="img1">
    <img src="/Images/home/Movie_Color_2.jpg" class="bg" id="img2">
    <img src="/Images/home/Movie_Color_3.jpg" class="bg" id="img3">
    <img src="/Images/home/Movie_Color_4.jpg" class="bg" id="img4">
    <img src="/Images/home/Movie_Color_5.jpg" class="bg" id="img5">
</div>

<a onclick="fun_next()" style="margin:100px">Next</a> <a onclick="fun_pre()">Previous</a>

<script>
    var val = "";
    function fun_next() {
        commm();
        if (val == 4) { $("#img4").hide(); $("#img1").show(); }
        if (val == 3) { $("#img3").hide(); $("#img4").show(); }
        if (val == 2) { $("#img2").hide(); $("#img3").show(); }
        if (val == 1) { $("#img1").hide(); $("#img2").show(); }
    }

    function fun_pre() {
        commm();
        if (val == 4) { $("#img4").hide(); $("#img3").show(); }
        if (val == 3) { $("#img3").hide(); $("#img2").show(); }
        if (val == 2) { $("#img2").hide(); $("#img1").show(); }
        if (val == 1) { $("#img1").hide(); $("#img4").show(); }
    }

    function commm() {
        if ($("#img1").is(':hidden') == false) { val = 1; }
        if ($("#img2").is(':hidden') == false) { val = 2; }
        if ($("#img3").is(':hidden') == false) { val = 3; }
        if ($("#img4").is(':hidden') == false) { val = 4; } 
    }
</script>

//ヘッド内スタイル

<style type="text/css">
    .bg
    {
        width: 100%;
        height: 90%;
        position: absolute;
        top: 0;
        left: 0;
        display: none;            
    }

    a
    {            
        z-index: 1000;
        position: absolute;
        color: White;
        margin:50px;
    }
</style>