php判断图片加载完,JavaScript_JS判断图片是否加载完成方法汇总(最新版)，有时需要获取图片的尺寸，这 - phpStudy...

JS判断图片是否加载完成方法汇总(最新版)

有时需要获取图片的尺寸，这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总，一起看看吧。

一、load事件

$('img').onload = function() {

//code

}

优点：简单易用，不影响HTML代码。

缺点：只能指定一个元素，javascipt代码必须置于图片元素的下方

二、jquery方法

$(function(){

$('.pic1').each(function() {

$(this).load(function(){

$(this).fadeIn();

});

});

})

注意，不要在$(document).ready()里绑定load事件。

优点：可以批量绑定元素事件，并且不影响HTML代码内容

缺点：需要jquery库的支持，代码需要放置到需要操作元素的下方。

三、readystatechange事件

img - readystatechange event

loading...

img.onreadystatechange = function() {

if(img.readyState=="complete"||img.readyState=="loaded"){

p.innerHTML = 'readystatechange:loaded'

}

}

readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件，其它浏览器不支持。

四、img的complete属性

img - complete attribute

loading...

function imgLoad(img, callback) {

var timer = setInterval(function() {

if (img.complete) {

callback(img)

clearInterval(timer)

}

}, 50)

}

imgLoad(img1, function() {

p1.innerHTML('加载完毕')

})

轮询不断监测img的complete属性，如果为true则表明图片已经加载完毕，停止轮询。该属性所有浏览器都支持。

以上内容是小编给大家介绍的JS判断图片是否加载完成方法汇总，希望对大家有所帮助，同时也非常感谢大家对phpstudy网站的支持！相关阅读:

ThinkPHP实现更新数据实例详解(demo)

xp系统开机总是弹出pci device硬件向导窗口的解决方法

win8系统怎么安装无线网卡？win8系统安装无线网卡的两种方法

基于PHP magic_quotes_gpc的使用方法详解

Win10系统访问不了共享文件夹提示网络错误的原因及解决方法

简单的HTML5初步入门教程

win10系统运行wps无响应的解决方案

Node.js 制作实时多人游戏框架

cookie中的path与domain属性详解

ASP.NET中访问DataGrid中所有控件值的方法

JavaWeb监听器Listener实例解析

ajax请求乱码的解决方法(中文乱码)

浅谈JavaScript函数的四种存在形态

用Mac在CoreOS上搭建WordPress的教程