1 <style>
 2     *{
 3         margin: 0;padding: 0;
 4         list-style: none;
 5     }
 6     body{
 7         background: black;        
 8     }
 9     .outer{
10         margin: 10px auto;
11         border: 1px solid white;
12         border-radius: 6px;
13         background-color: white;
14         width: 200px;
15         padding: 8px 6px 6px 8px;
16     }
17     .outer>ul{
18         overflow: hidden;
19     }
20 
21     .outer>ul>li, .outer>ul>li>img{
22         /* 两个部分设置内容一样，选择器写在一起。 */
23         float: left;
24         width: 48px;
25         height: 48px;
26         /* li的宽高不能直接由内部img撑起？ */
27 
28         margin: 0 2px 2px 0;
29     }
30     /* .outer>ul>li>img{
31         width: 48px;
32         height: 48px;
33     } */
34     .outer>ul>li:nth-child(1){
35         position:relative;
36         /* 相对定位，子绝父相，给后面的loading动态图div使用。 */
37     }
38     .outer>ul>li:nth-child(1), .outer>ul>li:nth-child(1)>img{
39         /* 两个部分设置内容一样，选择器写在一起。 */
40         width: 148px;
41         height: 148px;
42     }
43 
44     .outer>li.first div{
45     position:absolute;top:0;left:0;
46     width:156px;height:156px;
47     display:none;
48     opacity:0.5;filter:alpha(opacity=50);
49     background:#fff url(img/loading.gif) 50% 50% no-repeat;
50     /* 给第一个大图li加一个空div，添加loading的背景图。 让图片加载时，显示加载动图 */
51     }
52     </style>
53 
54     <script>
55     window.onload = function()
56     {
57         // var aImg = document.getElementsByTagName('img');
58 
59         // for(let i=0; i<aImg.length; i++)
60         // {
61         //     aImg[i].onmouseover = function()
62         //     {
63         //         aImg[0].src = this.src;
64         //     };
65         // };
66 
67         var oImg = document.getElementById("box").getElementsByTagName("img");
68 
69         var oDiv = document.getElementsByTagName("div")[0];
70         // 给第一个大图li加一个空div，添加loading的背景图。 让图片加载时，显示加载动图。
71         for (var i = 1; i < oImg.length; i++)
72         {
73             oImg[i].onmouseover = function ()
74             {                        
75                 var img = new Image();
76 
77                 img.src = oImg[0].src = this.src.replace(/small/,"big");
78                 // replace(); 方法，用于在字符串中用一些字符替换另一些字符。
79                 // 例如：
80                 // var str="Visit Microsoft!"
81                 // document.write(str.replace(/Microsoft/, "W3School"))
82                 // 输出：Visit W3School!
83 
84                 oDiv.style.display = "block";
85 
86                 img.complete ? oDiv.style.display = "none" : (oImg[0].onload = function() {oDiv.style.display = "none"})
87                 // complete  通过Image对象的complete 属性来检测图像是否加载完成。
88                 // onload    当图像装载完毕时调用的事件句柄。
89 
90                 // 所以上面这个三元表达式的意思是：
91                 // img这个图片对象是否加载完成？  
92                 // 加载完成就让div的display为none。   没有加载完成，就调用img的onload事件，让它加载完成，然后运行function 让div的display为none。
93                 
94                 // js Image()对象onload和预加载
95                 // https://segmentfault.com/a/1190000011020722?utm_source=tag-newest
96             }    
97         }
98     };
99     </script>