javascript 与图片预加载的遭遇

这几天工作中（博主今年大三，刚开始实习）遇到一个让我十分郁闷的问题那就是图片预加载时错误问题，最初我的做法是这样

  var Lurls = [
            'image/low/img2.jpg',
            'image/low/img4.jpg',
            'image/low/img0.jpg',
            'image/low/img5.jpg',
            'image/low/img1.jpg',
            'image/low/img3.jpg'
        ];

  var imgs = [];
 function ImgLoad(urls)
        {
            for(var i=0;i<urls.length;i++)
            {
                var img = new Image();
                img.src = urls[i];
;
                if (img.complete)
                {

                  //火狐浏览器在这里工作,运行良好，后来发现不用img.complete也可以运行因为火狐也可以异步加载图片

                }
                else
                {

               //谷歌浏览器跳过这些步骤，在所有代码运行完之后才运行onload函数
                        img.onload = function ()
                        {
                            callback(img);
                        };
                        img.src = urls[i];
                }

            }

        }

function callback(img)

{

     imgs.push(img);  

}

但是问题也来了，每次图片加载时在火狐上运行良好，但是在谷歌和IE上运行时就只能得到最后一张图片，数组中保存的6张图片完全相同。这让我百思不得其解。

后来我发现回调函数是将图片放入数组时，数组中已经存在的内容就会被覆盖掉。对于这一点我的理解是：当回调时img作为参数被返回回调函数被加入数组中，但在后续的返回中由于所有的img公用一块内存（不知道合不合适，我以前学c++是就是这样），而数组中的元素都指向img的地址。也就是说每当img回调是img的内容被替换掉了，而地址没变，数组中的元素都指向img这也就造成了后面的图片会覆盖掉前面的内容。

然后我就换了种方法

</pre><pre style="font-family: 宋体; font-size: 9pt; background-color: rgb(255, 255, 255);"><pre name="code" class="javascript">for(var i=0;i<Lurls.length;i++)
        {
            ImgLoad(Lurls[i]);
        }

       //加载低画质
        function ImgLoad(url)
        {
            var img = new Image();
            img.onload = function ()
            {
                callback(img);
            };
            img.src = url;
        }<pre style="font-size: 9pt; font-family: 宋体; background-color: rgb(255, 255, 255);"><span style="color: rgb(0, 0, 128); "><strong>function </strong></span><span style="font-style: italic;">callback</span>(img)
{
  imgs.push(img);
}

每次只加载一张,结果完全和我的想法一样，数组中的6张图片都被加载了进去。

最后我改进了代码如下
 for(var i=0;i<Lurls.length;i++)
        {
            ImgLoad(Lurls[i]);
        }

       //加载低画质
        function ImgLoad(url)
        {
            var img = new Image();
            img.onload = function ()
            {
                callback(img);
            };
            img.src = url;
        }

        function callback(img)
        {    
            imgs.push(img);
        }
完美解决了问题。