判断图片是否加载完成

最简单:

document.getElementById("img2").onload=function(){}

性能优化:

function loadImage(url, callback) {
 var img = new Image(); //创建一个Image对象,实现图片的预下载
 img.src = url;

 if(img.complete) { // 如果图片已经存在于浏览器缓存,直接调用回调函数
     callback.call(img);
     return; // 直接返回,不用再处理onload事件
    }
 img.onload = function () { //图片下载完毕时异步调用callback函数。
        callback.call(img);//将回调函数的this替换为Image对象
    };
};

对图片多个判断

var imgdefereds=[];
$(‘img‘).each(function(){
 var dfd=$.Deferred();
 $(this).bind(‘load‘,function(){
  dfd.resolve();
 }).bind(‘error‘,function(){
 //图片加载错误,加入错误处理
 // dfd.resolve();
 })
 if(this.complete) setTimeout(function(){
  dfd.resolve();
 },1000);
 imgdefereds.push(dfd);
})
$.when.apply(null,imgdefereds).done(function(){
    callback();
});

  

时间: 2024-10-20 17:05:17

判断图片是否加载完成的相关文章

JavaScript实现判断图片是否加载完成的3种方法整理

JavaScript实现判断图片是否加载完成的3种方法整理 有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法 通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码.如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将

使用JavaScript判断图片是否加载完成的三种实现方式

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 <!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <title>img - load event</title> </head> <body> <img id="img1" src="http:/

每天一个JavaScript实例-判断图片是否加载完成

<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>每天一个JavaScript实例-判断图片是否加载完成</title> <script> window.onload= function(){ //clearTimeout(clock); alert("加载完成"); } v

JavaScript判断图片是否加载完成

一.load事件 <!DOCTYPE HTML><html> <head>     <meta charset="utf-8">    <title>img - load event</title></head> <body>    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb

JavaScript判断图片是否加载完成的三种方式

一.load事件 ? 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head>     <meta charset="utf-8">     <title>img - load event</title> </head> <body>     <img id="img1" src=&qu

JavaScript判断图片是否加载完成的三种方式---转

JavaScript判断图片是否加载完成的三种方式 有时需要获取图片的尺寸,这需要在图片加载完成以后才可以.有三种方式实现,下面一一介绍. 一.load事件 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 <!DOCTYPE HTML> <html> <head>     <meta charset="utf-8">     <title>img - load event</title>

javaScript &amp; jquery完美判断图片是否加载完毕

好久没写东西了,正好最近因为工作需要,写了一个瀑布流异步加载的程序. 今天就不谈瀑布流,来谈一下关于load的问题. ------------------------------------------------------------- 众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求.在服务端生成item列表后,通过 js append到相应的div里边. 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般都放在服务器上,通过http下载到客户端. 例

jquery判断图片是否加载完毕

来源: <http://www.2cto.com/kf/201409/331234.html> 利用图片没有加载完成的时候,宽高为0.我们很容易判断图片的一个加载情况.如下: 思路:判断图片高度 --> 存在高度等于0 --> 定时500毫秒再次扫描 --> 直到全部不等于0 -->进行下一步处理 注意:引入jquery.js 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN&

javascript判断图片是否加载完成方法整理

有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果.本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明. onload方法 通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码.如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将图片显示出来. 1 2 3 4 5 6 7 <img cla