javascript 图像预载入和如何判断图片是否加载完成

很多high-res图像真的可以使 Web 站点更加整洁。但是它们也会使站点的访问速度变慢——图像是文件，文件使用带宽，带宽直接与等待时间相关。是该了解如何通过一个叫做图像预载入（preloading）的技巧来提高 Web 站点的访问速度的时候了。

图像预载入

对于浏览器载入图像来说，只有在对图像发送一个 HTTP请求之后，它们才会被浏览器载入，对图像的 HTTP 请求要么使用 ＜img＞ 标记，要么通过方法调用实现。如果使用 JavaScript 脚本来处理在 mouseover 事件时交换图像，或者在一段时间之后自动更改图像，那么在从服务器获取图像时可能要等上几秒钟到几分钟的时间。如果使用一个慢速的 Internet 连接，或者要获取的图像非常大，或者其它一些情况，这种现象就特别明显；这样，延迟就造成你不能达到自己期望的效果。

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

Image() 对象

预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象，然后将需要载入的图像的 URL 作为参数传入。假设我们有一个图像叫做heavyimagefile.jpg，在用户的鼠标放到一个已经显示的图像之上时，我们希望显示这个图像。为了预载入这一图像从而得到较快的响应时间，我们简单地创建一个 Image() 对象 heavyImage，然后在 onLoad() 事件处理器中将其同时载入。

function preloader()
{
    heavyImage=new Image();
    heavyImage.src="../images/bigGirl.jpg";
}
document.onload=preloader;

<img src="../images/yanzi.jpg" name="img1" onmouseover="js:document.images.img1.src='../images/bigGirl.jpg';  /> </a>

或者this.src=' ';

使用数组载入多个图像

在实际应用中，我们可能需要预载入多个图像，而不止一个；例如，在一个包含多个图像翻卷的菜单栏中，或者在我们试图创建平滑效果时，都需要预载入多个图像。其实这并不困难，只要使用 JavaScript 的数组即可实现，如下例所示：

function preloader()
{
    var i=0; //counter;
    var imageObj=new Image();
    var images=new Array();
    for(i=0;i<5;i++)
    {
        images[i]=i+'jpg';
        
    }
    for(i=0;i<5;i++)
    {
        imageObj.src=images[i];
    }
}

在上面的例子中，我们定义一个变量 i和一个 Image() 对象 imageObj。然后定义了一个新数组 images[]，每个数组元素存储要被预载入的图像。最后，创建一个 for() 循环来处理整个数组，并将每个元素赋给 Image() 对象，这样将其载入到缓存中。

function onloadFunc()
{
var objImage=new Image();
objImage.src="../images/bigGirl.jpg";//preload the image
objImage.onload=function(){ window.location.href="http://www.baidu.com"; }
}

<img src="../images/yanzi.jpg" name="img1" onmouseover="js:onloadFunc();" />

当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。

当然，你还可以创建一个图像数组然后在其上进行循环操作，预载入每个图像，然后在每一阶段跟踪被载入图像的数目。一旦所有图像载入完毕，根据事件处理器的程序逻辑，它就可以将浏览器带入下一个页面（或者执行其它任务）。

via:http://www.wzsky.net/html/Website/Javascript/39549.html

http://blog.donews.com/bigcarp/archive/2006/12/21/1100702.aspx

如何判断图片是否加载完成

一、一般情况下

1）图片静态页面标签<img />创建

<img src = 'http://www.baidu.com/img/baidu_sylogo1.gif' onload='onloadHandler(this)' />

2）图片通过脚本动态创建

1 var img = document.createElement('img');
2 img.onload = function(){
3 　　alert('img loaded, img.src = ' + this.src);
4 };
5 img.onload = onloadHandler;

二、

假设页面原本有这么张静态图片，但没有通过行内脚本的绑定onloadHandler，如下代码所示：（有可能开发GG很痛恨行内脚本）

<img src="http://www.baidu.com/img/baidu_sylogo1.gif" id="pic" />

多很多很多的资源要加载 -->

<!-- 假设此处有很
<script>

function $(id) { return document.getElementById(id);}
function onloadHandler(){

　　alert('img loaded, img.src = ' + this.src);

};

var img = $('pic');
img.onload = onloadHandler;baidu.com/img/baidu_sy

img.src = "http://www.logo1.gif";

</script>

会有什么问题呢？有可能这段脚本运行之前，图片的onload事件已经触发了，于是，onloadHandler永远也不会执行 >_<

如何解决？—— img.complete

img.complete：如果图片之前已经加载完成，则为true，否则为false

<script>

function $(id) { return document.getElementById(id);}
function onloadHandler(){
　　alert('img loaded, img.src = ' + this.src);
};

var img = $('pic');
img.src = "http://www.baidu.com/img/baidu_sylogo1.gif";
if(img.complete){
    onloadHandler.call(img);
}else{
    img.onload =onloadHandler;  //注意这里跟上面的区别，img.src赋值 与 绑定 onload事件的顺序相反  

} </script>

写在后面：以上代码未经各大浏览器/版本 严格摧残验证，以下问题尚待验证，求不小心踩进来的大大指教！

1）是否所有主流浏览器均支持 img.complete（包括不同版本）

2）有没有可能在第一个分支判断 if(img.complete) 结束后，但未运行到 img.onload 这块代码，img的onload事件已经触发，导致onloadHandler不会执行

下面这段代码中间插了个耗时无比的逻辑，延迟onload的绑定，结果：onload处理方法还是执行了

var img = document.createElement('img');
img.src = 'http://im-img.qq.com/inc/images/new_header2/logo.gif';
if(img.complete){
    console.log('a');
    onloadHandler.call(img);
}else{
    var t1 = new Date() - 0;
    var div = document.createElement('div');
    for(var i=0; i<10000; i++){
        div.innerHTML = div.innerHTML + i;
    }
    document.body.appendChild(div);
    var t2 = new Date() - 0;
    console.log(t2 - t1);  //在chrome23.0里，6000++ms
    img.onload = onloadHandler;
    
    img.onload = onloadHandler;  //神奇的事情：onload事件触发，而且处理方法被执行了
}

demo:http://jsfiddle.net/x2aW8/light/
----------------

avascript如何判断一张图片是否加载完成:
在实际应用中有时候需要判断图片是否加载完成，以便判断在完成前和完成后应该做哪些事情，下面就简单介绍一下如何实现此功能。代码实例如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="http://www.softwhy.com/" />
<head>
<title>如何判断一个图片是否加载完成-蚂蚁部落</title>
</head>
<body>
<img src="1.png" id="myimage" />
<script type="text/javascript">
var myimage=document.getElementById("myimage");
myimage.onload=function()
{
  alert("图片加载完成");
} 
</script>
</body>
</html>

以上代码，当图片加载完成的时候会弹出一个提示框，实现了我们的需求。但是此种方法有个缺点，那就是不能够使用window.onload=function(){}，因为这个时候文档已经加载完成了，图片的onload事件自然就无效了。所以推荐使用动态方式。
代码如下:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset=" utf-8"> 
<meta name="author" content="[url=http://www.softwhy.com/]http://www.softwhy.com/[/url]" />
<head>
<title>如何判断一个图片是否加载完成-蚂蚁部落</title>
<script type="text/javascript">
window.onload=function()
{
  var mydiv=document.getElementById("mydiv");
  var newImage=new Image()
  newImage.src='1.png'
  newImage.onload=function()
  {
    alert("图片加载完成");
    mydiv.appendChild(newImage);
  }
}
</script>
</head>
<body>
<div id="mydiv"></div>
</body>
</html>

以上代码同样可以在图片加载完成之后弹出一个对话框，并且将图片在div中显示.

JS快速获取图片宽高的方法

// 图片地址
var img_url = 'http://www.qttc.net/static/upload/2013/13643608813441.jpg';
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 判断是否有缓存
if(img.complete){
    // 打印
    alert('from:complete : '+img.width+',height:'+img.height);
}else{
    // 加载完成执行
    img.onload = function(){
        // 打印
        alert('from:onload : '+img.width+',height:'+img.height);
    };
}

通过定时循环检测获取

看看以下例子，为了避免从缓存里读取数据，每一次请求都带时间戳：

// 记录当前时间戳
var start_time = new Date().getTime();
 
// 图片地址
var img_url = 'http://b.zol-img.com.cn/desk/bizhi/image/2/2560x1600/1365477614755.jpg?'+start_time;
 
// 创建对象
var img = new Image();
 
// 改变图片的src
img.src = img_url;
 
// 定时执行获取宽高
var check = function(){
    // 只要任何一方大于0
    // 表示已经服务器已经返回宽高
    if(img.width>0 || img.height>0){
        var diff = new Date().getTime() - start_time;
        document.body.innerHTML += '<div>from:<span style="color:red;">check</span> : '+img.width+',height:'+img.height+', time:'+diff+'ms</div>';
        clearInterval(set);
    }
};
 
var set = setInterval(check,40);
 
// 加载完成获取宽高
img.onload = function(){
    var diff = new Date().getTime() - start_time;
    document.body.innerHTML += '<div>from:<span style="color:blue">onload</span> : '+img.width+',height:'+img.height+', time:'+diff+'ms</div>';
};

更详细的看：http://www.qttc.net/201304304.html

http://www.111cn.net/wy/js-ajax/50093.htm