javascript 与图片预加载的遭遇

原创 2015年11月21日 13:51:56
这几天工作中(博主今年大三,刚开始实习)遇到一个让我十分郁闷的问题那就是图片预加载时错误问题,最初我的做法是这样
  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);
        }

完美解决了问题。

版权声明:本文为博主原创文章,未经博主允许不得转载。

js-图像img预加载

图像预载入  对于浏览器载入图像来说,只有在对图像发送一个 HTTP请求之后,它们才会被浏览器载入,对图像的 HTTP 请求要么使用 <img> 标记,要么通过方法调用实现。如果使用 JavaScri...
  • zhuchunyan_aijia
  • zhuchunyan_aijia
  • 2016年07月24日 22:44
  • 899

Javascript图片预加载详解

预加载图片是提高用户体验的一个很好方法。图片预先加载到浏览器中,访问者便可顺利地在你的网站上冲浪,并享受到极快的加载速度。这对图片画廊及图片占据很大比例的网站来说十分有利,它保证了图片快速、无缝地发布...
  • yisuowushinian
  • yisuowushinian
  • 2015年05月29日 11:01
  • 31081

网页中图片预加载的原理

其实我并不清楚图片预加载的原理,只是一些猜测。网上介绍的图片预加载,基本上都在说javascript中应该怎么样怎么样,new一个Image()对象。但是,老大,预加载的目的,归根到底,还是要将这个图...
  • leftfist
  • leftfist
  • 2015年07月08日 16:45
  • 5986

实现图片预加载的几种方式

感觉自己好久没有写博客了,可能自己变懒了。不知道为什么最近有点迷茫,不知道是该去学一下新东西还是该去看一下具有深度的东西。新的技术需要关注,但是我要去研究一下jquery的源码,这个东西很早就想去看,...
  • baidu_24024601
  • baidu_24024601
  • 2017年07月26日 23:35
  • 2357

图片预加载与图片懒加载(缓载)的区别与实现

预加载与懒加载,我们经常经常用到,这些技术不仅仅限于图片加载,我们今天讨论的是图片加载: 一、什么是图片预加载与懒加载: 图片预加载:顾名思义,图片预加载就是在网页全部加载之前...
  • alex8046
  • alex8046
  • 2015年12月23日 16:43
  • 6567

Javascript实现图片的预加载的完整实现

图片预加载是web开发中一种应用相当广泛的技术,比如我们在做图片翻转显示等特效的时候,为了让图片在转换的时候不出现等待,我们最好是先让图片下载到本地,然后在继续执行后续的操作。今天我们将来实现一个完整...
  • sdta25196
  • sdta25196
  • 2017年11月30日 10:40
  • 102

Javascript实现图片预加载【回调函数,多张图片】

使用JS实现一组图片动画效果或者使用HTML5 Canvas渲染一系列图片等案例中,需要图片全部加载完成方可运行动画效果。此时程序中就会涉及多张图片预加载代码。当接二连三的案例中都涉及图片预加载时,就...
  • alex8046
  • alex8046
  • 2015年12月23日 16:58
  • 1360

Javascript图片预加载

Javascript图片预加载在遇到图片很多的时候,使用图片预加载可以避免在交互展示中所造成的一些麻烦,比如图片背景切换闪烁问题。简单版本:// 图片预加载 var preloadImages = [...
  • gmd_web
  • gmd_web
  • 2017年02月16日 12:01
  • 93

【JavaScript】JavaScript实现图片翻转以及预加载图片

本文章地址:http://blog.csdn.net/csdn_yudong/article/details/51605627 本文由 Never_yu 创作,转载请保留出处。我们先来看一个没有预加...
  • csdn_yudong
  • csdn_yudong
  • 2016年06月07日 18:02
  • 423

javascript图片预加载

用于图片预加载,主要试用手机端
  • lichengbei100
  • lichengbei100
  • 2015年11月25日 10:43
  • 273
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 与图片预加载的遭遇
举报原因:
原因补充:

(最多只允许输入30个字)