js中图片预载入与Image()类

作者: 秋染蒹葭 | 来源:发表于2017-06-14 19:41 被阅读871次

js中图片预载入与Image()类
Vue实现图片预加载
new Iamge()的用法
2018-07-27
图片懒加载
JS
常用数据结构和函数
ueditor问题
canvas图片跨域问题
小程序js创建二维码

预载入

在android混合开发中，webView的html页面在加载本地的图片的时候，假如图片过大（存储尺寸或者显示尺寸），经过测试，在手机上也可能出现界面加载闪烁。对于浏览器载入图像来说，只有在对图像发送一个 HTTP请求之后，它们才会被浏览器载入，对图像的 HTTP 请求要么使用＜img＞标记，要么通过方法调用实现。如果使用 JavaScript 脚本来处理更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果，视觉上最明显的就是会闪屏或者白屏。

一些浏览器采用一些措施来缓解这一问题，比如试图通过在本地缓存中存储图像，从而使随后对图像的调用能够立即被满足；但是在图像第一次被调用时依然会存在一些延迟。预载入是在需要图像之前将其下载到缓存的一种方法。通过这一措施，当真正需要图像时，它就可以被立即从缓存中取出，从而能够立即显示。

Image()对象

创建一个Image对象：var a=new Image(); 定义Image对象的src:a.src=”xxx.gif”; 这样做就相当于给浏览器缓存了一张图片。

建立图像对象：图像对象名称=new Image([宽度],[高度])
图像对象的属性： border complete height hspace lowsrc name src vspace width
图像对象的事件：onabort onerror onkeydown onkeypress onkeyup onload
需要注意的是：src 属性一定要写到 onload 的后面，否则程序在 IE 中会出错。

var img=new Image();  
    img.onload=function(){alert("img is loaded")};  
    img.onerror=function(){alert("error!")};  
    img.src="http://www.abaonet.com/img.gif";  
    function show(){alert("body is loaded");};  
    window.onload=show;

在 FF 中，img 对象的加载包含在 body 的加载过程中，既是 img加载完之后，body 才算是加载完毕，触发 window.onload 事件。

在 IE 中，img 对象的加载是不包含在 body 的加载过程之中的，body 加载完毕，window.onload 事件触发时，img对象可能还未加载结束，img.onload事件会在 window.onload 之后触发。

根据上面的问题，考虑到浏览器的兼容性和网页的加载时间，尽量不要在Image 对象里放置过多的图片，否则在 FF 下会影响网页的下载速度。当然如果你在 window.onload 之后，执行预加载函数，就不会有 FF 中的问题了。

onLoad() 事件处理器

像很多 JavaScript 的其它对象一样，Image() 对象也有一些事件处理器。其中最有用的一个肯定是 onLoad() 处理器，它在图像完全载入之后调用。这个事件处理器可以与一个自定义函数联系起来，以在图像完全载入之后执行一些特定的任务。

complete ()属性

可以通过Image对象的complete 属性来检测图像是否加载完成（每个Image对象都有一个complete属性，当图像处于装载过程中时，该属性值false,当发生了onload、onerror、onabort中任何一个事件后，则表示图像装载过程结束（不管成没成功），此时complete属性为true）

注

ie 火狐等大众浏览器均支持 Image对象的onload事件。

ie8及以下、opera 不支持onerror事件

eg:

<pre><code>
   modeImgCache = (function () {

    var Count =16;
    var Imgs = new Array(Count);
    var ImgLoaded =0;

    //加载单个图片
    this.downloadImage = function (i)
    {
        var imageIndex = i; //图片以1开始
        Imgs[i].src = "img/mode_bg_"+imageIndex+".png";
        Imgs[i].onLoad=validateImages(i);
    }

    //验证是否成功加载完成，如不成功则重新加载
    function validateImages(i){
        if (!Imgs[i].complete)
        {
            setTimeout('downloadImage('+i+')',200);
        }
        else if (typeof Imgs[i].naturalWidth != "undefined" && Imgs[i].naturalWidth == 0)
        {
            setTimeout('downloadImage('+i+')',200);
        }
        else
        {
            ImgLoaded++
        }
    }
    //预加载图片
    function preLoadImgs()
    {
        for(var i=1;i<=16;i++){
            Imgs[i]=new Image();
            try {
                downloadImage(i);
            }catch (e){
                console.log(e);
            }

        }
    };
    preLoadImgs();
    return Imgs;
})()
</code></pre>