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.length; 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>