jQuery顺序加载图片(初版)

浏览器加载图片区别:

• IE:同时加载与渲染
• 其他:加载完之后再渲染

根据这个差异用jQuery做个实例:按顺序加载一组图片,加载完成后提示.

 <!DOCTYPE html>
 <html>
 <head>
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>顺序加载图片demo</title>
     <script type="text/javascript" src="js/jquery-2.0.0.min.js"></script>
     <link rel="stylesheet" type="text/css" href="css/style.css">

     <script type="text/javascript">
     $(function() {
         $("button").click(function() {
             $(this).css({display: 'none'});              // 隐藏按钮
             $("#imgBox").css({display: 'inline-block'}); // 显示图片区域
             //获取图片src数组
             var imgPathArr = getImgInfo();
             for (var i = 0; i < imgPathArr.length; i++) {
                 loadImg(i, imgPathArr[i], function(){
                     // 提示加载完成
                     alert("done");
                 });
             };
         });

         function loadImg(index, imgPath, callback) {
             var imgO = new Image();
             $(".a1").append(imgO);

             var temp = document.getElementById("imgBox");
             var imgt = temp.getElementsByTagName("img")[0];
             imgt.onload = function(){
                 callback();
             };

             $("img").eq(index).attr('src', imgPath);
         }
         //获取图片信息
         function getImgInfo(){
             //图片信息
             return imgInfo= [
                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/jetstrike_large.png",
                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/flightkit_large.png",
                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/metropolitan_large.png",
                         "https://www.videocopilot.net/assets/public/images/v6/products/boxes/projectileweapons_large.png",
             ];
         }
     });
     </script>
 </head>
 <body>
     <div id="imgBox">
         <div class="a1"></div>
     </div>
     <button>Click Me</button>
 </body>
 </html>

经测试,bug:

1. IE下显示顺序乱的
2. FF看不出...

待更新...