和加载状态,js图片预加载示例

2019-11-21 02:51栏目:网络时代
TAG:

本文章来给各位同学介绍关于image的加载事件(onload)和加载状态(complete)用法,各位朋友可参考。

js图片预加载简单示例

昨天用jQuery插件aeImageResize,发现它更有优势:每张图片加载完后,会马上进行等比缩放。
这归于图片对象Image的加载事件onload的功劳。
查看插件的源码,发现它也依赖图片对象的complete属性和onload事件,并且特别把IE6区分对待,到底IE6在图片加载对象上,与其它浏览器有什么不同呢?

之前做过这样一个需求,要让商家页的商家图片按照图片外面box的大小等比例缩放。之前的想法是在页面中先输出图片的src,然后在页面底部初始化js,然后在js中写相应的可以使图片按照box的大小等比例缩放的函数。要实现图片的等比例缩放要做到以下几点,

复制代码 代码如下:

看下文:

第一,得到图片的width和height
第二,比较图片的width和height与box的width的height的大小,共有四种情况,

function loadImage(url, callback) {
    if(url!='null') {
        var img = new Image();
        img.src = url;
        if(img.complete) {
            callback(img);
        } else {
            img.onload = function(){
                img.onload = null;
                callback(img);
            }
        }
    }
}

通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识。
看个例子:

# 如果图片的width和height均小于box的width和height,那么直接让图片上下左右居中即可,
# 如果图片的width大于box的width,height小于box的height,让图片按照宽度等比例缩放,然后垂直居中,
# 如果图片的height大于box的height,width小于box的width,让图片按照高度等比例缩放,然后左右居中,
# 如果图片的width和height均大于box的width和height,那么分别计算图片的widht和height和box的width和height的比,用较小的值作为缩放的比例,然后上下左右居中即可。

loadImage(pic_url,loadImage);

复制代码 代码如下:

第三,将得到的图片放入对应的img节点中即可

另一个详细详解示例

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.src = isrc;
Img.onload = function ()
{
document.body.appendChild(Img);
}
}
//-->
</script>

    第二步和第三步都比较好实现,几个if..else循环即可搞定,但是对于第一步如何获得图片的width和height是个需要解决的关键性问题,之前的想法是在页面中直接输入图片的src,然后再将图片进行等比例缩小,但是这样存在了一个问题,就是无论如何,图片都会先展示出来原来的大小,然后再等比例缩小,这样在体验上非常不好,所以首先考虑到可以先让图片visiblility:hidden,然后在js计算完图片的大小的时候再让图片visibility:visible,这样虽然可以实现效果但是存在一定的限制,因为在页面的代码全部加载完毕后,图片不一定加载完毕,如果是一张较小的图片,那么这种方法可以很幸运的获得原始图片的高度和宽度,但是如果图片非常大,在图片还没有加载完毕,代码即运行结束,这样获得的图片的大小即不是真实的值,所以现在存在的一个问题就是如何在图片完全加载完毕之后再获得图片的真实的高度和宽度。我们这时自然而然的想到了img对象的onload方法,img.onload是当一张图片被加载完成后所触发的事件。下面看一个例子,

通过js操纵DOM很多情况下都是为了实现和当前页html元素的异步载入,我谈谈对Image对象的一些认识。
看个例子:

当包含上述代码的页面打开时并不载入“tt.jpg”,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。如果你是第一次加载 “tt.jpg" 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?
IE、Opera中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 “onload”事件?是缓存机制?
FF、Chrom中,每点击一次加载一张该图片。
稍微修改下:

{code}

复制代码 代码如下:

复制代码 代码如下:

 代码如下

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
    function addImg(isrc)
    {
        var Img = new Image();
        Img.src = isrc;
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
    }
//-->
</script>

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
function addImg(isrc)
{
var Img = new Image();
Img.onload = function ()
{
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>

复制代码

当包含上述代码的页面打开时并不载入 “tt.jpg” ,当点击按钮时候才载入。当载入完成后触发onload事件显示到页面上。
如果你是第一次加载 “tt.jpg" 这张图片的话,运行正常。点击按钮加载并显示一张图片,如果重复点击会怎么样呢?
IE、Opera中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。难道它们只触发一次 ”onload“ 事件?是缓存机制?
FF、Chrom中,每点击一次加载一张该图片。

运行后发现,奇怪的事情发生了。
所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件!
联想一下 Image 对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete]) (为防止缓存影响效果请更换图片名称!)

<input type=”button” name=”" value=”载入图片” onclick=”addImg(‘tt.jpg’)” />
<script type=”text/javascript”>
   function addImg(isrc)
   {
       var Img = new Image();
       Img.src = isrc;
       Img.onload = function ()
       {
             document.body.appendChild(Img);
       }
   }
</script>

稍微修改下:

复制代码 代码如下:

{code}

复制代码 代码如下:

<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"nreadyState : "+Img.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
var Img;
function addImg(isrc)
{
Img = new Image();
//Img.src = isrc;
Img.onload = function ()
{
alert("complete : "+Img.complete +"nreadyState : "+Img.readyState)
document.body.appendChild(Img);
}
Img.src = isrc;
}
//-->
</script>

当页面打开后,点击按钮后,会显示tt.jpg,但是如果重复点击会怎样呢?在IE中,除了第一次加载 图片时候显示正常,之后再点击就没有反应了,刷新也一样。FF中,每点击一次加载一张该图片。而这是什么原因呢?是因为在IE中只执行了一次onload或者是缓存的问题吗?先改写一下代码,

<input type="button" name="" value="载入图片" onclick="addImg('tt.jpg')" />
<script type="text/javascript">
<!--
    function addImg(isrc)
    {
        var Img = new Image();
        Img.onload = function ()
        {
              document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//-->
</script>

经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,这和IE的 readyState 属性的表现一致!
至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢?
众所周知,从缓存里加载东西的速度是很快的,那么在

{code}

运行后发现,奇怪的事情发生了。所有的浏览器都一致了,都是每点击一次加载一张图片。这又是什么原因?
由此可以见 IE、Opera 执行过程中并不是只触发一次 onload 事件!

复制代码 代码如下:

 代码如下

联想一下 Image 对象的一些属性看看,complete、readyState(IE专属值[uninitialized,complete]) (为防止缓存影响效果请更换图片名称!)

...
Img.src = isrc;
Img.onload = ...
...

复制代码

复制代码 代码如下:

的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件?
这回加载一张根本不存在的图片看看效果:

<input type=”button” name=”" value=”载入图片” onclick=”addImg(‘tt.jpg’)” />
<script type=”text/javascript”>
   function addImg(isrc)
   {
       var Img = new Image();
       Img.onload = function ()
       {
             document.body.appendChild(Img);
       }
       Img.src = isrc;
   }
</script>

<input type="button" name="" value="complete" onclick='alert("complete : "+Img.complete +"nreadyState : "+Img.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtm.jpg')" />
<script type="text/javascript">
<!--
    var Img;
    function addImg(isrc)
    {
        Img = new Image();
        //Img.src = isrc;
        Img.onload = function ()
        {
            alert("complete : "+Img.complete +"nreadyState : "+Img.readyState)
            document.body.appendChild(Img);
        }
        Img.src = isrc;
    }
//-->
</script>

复制代码 代码如下:

{code}

经过以上测试,可以看出一些不同点,对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,
complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!
但是其它浏览器表现出来的确不一样,只要以前加载过该图,浏览器有缓存,complete 就为 true ,
这和IE的 readyState 属性的表现一致!
至此,可以肯定的是所有的浏览器都会缓存图片!可是上面的问题到底是什么原因导致的呢?
众所周知,从缓存里加载东西的速度是很快的,那么在

<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
var Imgttmt;
function addImg(isrc)
{
Imgttmt = new Image();
Imgttmt.src = isrc;
alert("complete : "+Imgttmt.complete +"nreadyState : "+Imgttmt.readyState)
Imgttmt.onload = function ()
{
alert("impossible")
}
}
//-->
</script>

现在再点击图片,就正常了,从此可见不是因为IE没有触发onload事件,而是因为IE中加载缓冲区的速度太快,以至于没有运行到img.onload的时候,图片已经被加载完毕了。因此,可以先告诉浏览器如何处理这张图片,然后再制定这张图片的来源。一般情况下,可以用complete来判断图片是否加载完毕。对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为true ,否则一直是false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!可以写如下的函数来做到各个浏览器中预加载图片的兼容性。

复制代码 代码如下:

可以肯定的是所有浏览器都不触发 onload 事件。
从是否缓存或已经加载过图片的角度讲,IE、Opera表现正常,complete 始终为 false ;IE的 readyState 始终为uninitialized 。
令人疑惑的是FF,其中 Imgttmt.complete 的值一直是 true ;
更令人困惑的是 Chrom,它是在最初 new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了!
如果换一张从来没有加载过的图片,FF和Chrom 的行为就一致了,都是一开始加载时, Imgttmt.complete 值为false, 之后为 true!
测试的过程中还发现,脚本的执行顺序的确会影响到类似于 onload 等事件的追加,如果在其显示后在追加事件就没有什么实际意义了!
基于 javascript 这种解释性语言的特性,在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。

 代码如下

Img.src = isrc;
Img.onload = ...

这归于图片对象Image的加载事件onload的功劳。 查看...

复制代码

的过程中,难道 IE、Opera 加载的速度快到,来不及追加事件?

{code}
var imgLoad = function (url) {
   var img = new Image();
   img.src = url;
   if (img.complete) {
       callback(img.width, img.height);
   } else {
       img.onload = function () {
           callback(img.width, img.height);
           img.onload = null;
       };
   };
};
{code}

这回加载一张根本不存在的图片看看效果:

之前做过这样一个需求,要让商家页的商家...

复制代码 代码如下:

<input type="button" name="" value="complete" onclick='alert("complete : "+Imgttmt.complete +"nreadyState : "+Imgttmt.readyState)' />
<input type="button" name="" value="载入图片" onclick="addImg('mtmttyt.jpg')" />
<script type="text/javascript">
<!--
    var Imgttmt;
    function addImg(isrc)
    {
        Imgttmt = new Image();
        Imgttmt.src = isrc;
        alert("complete : "+Imgttmt.complete +"nreadyState : "+Imgttmt.readyState)
        Imgttmt.onload = function ()
        {
            alert("impossible")
        }
    }
//-->
</script>

可以肯定的是所有浏览器都不触发 onload 事件。从是否缓存或已经加载过图片的角度讲,IE、Opera表现正常,complete 始终为 false ;
IE的 readyState 始终为uninitialized 。令人疑惑的是FF,其中 Imgttmt.complete 的值一直是 true ;更令人困惑的是 Chrom,它是在最初
new Imgttmt() 的时候 Imgttmt.complete 值为 false。而之后 Imgttmt.complete 值就一直为 true 了!如果换一张从来没有加载过的图片,
FF和Chrom 的行为就一致了,都是一开始加载时, Imgttmt.complete 值为false, 之后为 true!

测试的过程中还发现,脚本的执行顺序的确会影响到类似于 onload 等事件的追加,如果在其显示后在追加事件就没有什么实际意义了!
基于 javascript 这种解释性语言的特性,在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。

您可能感兴趣的文章:

  • 解析javascript图片懒加载与预加载的分析总结
  • 理解Javascript图片预加载
  • 多种js图片预加载实现方式分享
  • 基于javascript实现图片预加载
  • js预加载图片方法汇总
  • 浅析js预加载/延迟加载
  • JS实现预加载视频音频/视频获取截图(返回canvas截图)

版权声明:本文由澳门新葡亰平台游戏发布于网络时代,转载请注明出处:和加载状态,js图片预加载示例