image的加载事件(onload)和加载状态(complete)

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

第一，获得图片的width和height
第二，比较图片的width和height与box的width的height的大小，共有四种状况，

# 若是图片的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的比，用较小的值做为缩放的比例，而后上下左右居中便可。

第三，将获得的图片放入对应的img节点中便可

 

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

<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>

 

当页面打开后，点击按钮后，会显示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>

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

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;
        };
    };
};

文章来自：http://blog.sina.com.cn/s/blog_73c8ed1901013k70.html