图片预加载

我之前只会图片的懒加载   由于工作需要  学会了图片预加载

网上介绍的图片预加载，基本上都在说javascript中应该怎么样怎么样，new一个Image()对象。

但是，老大，预加载的目的，归根到底，还是要将这个图片显示出来。你javascript里面的这个Image对象，要怎么样才能让网页的img标签显示出来呢？

没说，好像都没说。

在HTML标签IMG里，src属性可以指向一个web服务，这是人所共知的。问题是，它能指向js的那个Image对象吗？未闻也。 
从网上一些示例看，我猜是这样的：

var img = new Image();
img.src = "图片路径";//将图片加载到JS对象img里

 

<img id="img1" src="图片路径，与js的Image对象的src一致" alt="" />

首先在JS里面进行预加载，然后html里的img就能自然而然地用上了这个预加载

控制这一切的，是浏览器，它统一协调了JS和HTML

利用JS对图片进行加载，有时会比较方便，比如设置图片加载完毕以后，触发一些啥东东；或通过Image对象，获得图片的width、height属性，等等。

function preloadImg(url) {
    var img = new Image();
    img.src = url;
    if(img.complete) {//如果有缓存
        //接下来可以使用图片了
        //do something here
    }
    else {
        img.onload = function() {
            img.onload = null;
            //接下来可以使用图片了
            //do something here
        };
    }
}