JS 학습노트-fgm 연습 2-11 - 이미지 경로 변경 var img = new Image();그림 미리 로드

<style>
    *{
        margin: 0;padding: 0;
        list-style: none;
    }
    body{
        background: black;        
    }
    .outer{
        margin: 10px auto;
        border: 1px solid white;
        border-radius: 6px;
        background-color: white;
        width: 200px;
        padding: 8px 6px 6px 8px;
    }
    .outer>ul{
        overflow: hidden;
    }

    .outer>ul>li, .outer>ul>li>img{
        /*           ，       。 */
        float: left;
        width: 48px;
        height: 48px;
        /* li          img  ？ */

        margin: 0 2px 2px 0;
    }
    /* .outer>ul>li>img{
        width: 48px;
        height: 48px;
    } */
    .outer>ul>li:nth-child(1){
        position:relative;
        /*     ，    ，    loading   div  。 */
    }
    .outer>ul>li:nth-child(1), .outer>ul>li:nth-child(1)>img{
        /*           ，       。 */
        width: 148px;
        height: 148px;
    }

    .outer>li.first div{
    position:absolute;top:0;left:0;
    width:156px;height:156px;
    display:none;
    opacity:0.5;filter:alpha(opacity=50);
    background:#fff url(img/loading.gif) 50% 50% no-repeat;
    /*       li    div，  loading    。       ，       */
    }
    style>

    <script>
    window.onload = function()
    {
        // var aImg = document.getElementsByTagName('img');

        // for(let i=0; i
        // {
        //     aImg[i].onmouseover = function()
        //     {
        //         aImg[0].src = this.src;
        //     };
        // };

        var oImg = document.getElementById("box").getElementsByTagName("img");

        var oDiv = document.getElementsByTagName("div")[0];
        //       li    div，  loading    。       ，      。
        for (var i = 1; i < oImg.length; i++)
        {
            oImg[i].onmouseover = function ()
            {                        
                var img = new Image();

                img.src = oImg[0].src = this.src.replace(/small/,"big");
                // replace();   ，                   。
                //   ：
                // var str="Visit Microsoft!"
                // document.write(str.replace(/Microsoft/, "W3School"))
                //   ：Visit W3School!

                oDiv.style.display = "block";

                img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})
                // complete    Image   complete              。
                // onload                   。

                //                ：
                // img            ？  
                //       div display none。         ，   img onload  ，      ，    function  div display none。
                
                // js Image()  onload    
                // https://segmentfault.com/a/1190000011020722?utm_source=tag-newest
            }    
        }
    };
    script>