img的complete和onload
HTML DOM complete 属性
定义和用法:
complete 属性可返回浏览器是否已完成对图像的加载。
如果加载完成,则返回 true,否则返回 fasle。
语法:
imageObject.complete
Image onload 事件
定义和用法:
onload 事件在图片加载完成后立即执行。
语法
onload="JavaScriptCode"
complete只是HTMLImageElement对象的一个属性,而onload则是这个Image对象的load事件回调,前者不能准确的在事件发生时进行异步回调并且在浏览器的兼容性上也有些问题。
这两者,只有img.complete可以判断图片加载完成,img.onload并不能判断图片是否加载完,而是在加载完毕之后,直接运行onload绑定的函数。
img加载完成就会解除onload事件,src是异步加载图片的,如果在绑定事件前就已经加载完成,onload事件不会触发。img.complete是一直都有的属性,加载完成后为true。
img.onload是当一张图片被加载完成后所触发的事件
实现图片显示功能;
<div>
<img id="img"/>
</div>
js部分:img.src="图片";
img.onload=showImg;
function showImg(){
代码部分。。。。
}
对于 complete 属性来讲,IE是根据图片是否显示过来判断,就是说当加载的图片显示出来后,complete 属性的值才为 true ,否则一直是 false ,和以前是否加载过该张图片没有关系,即和缓存没有关系!这里要注意,显示与否和img.style.display无关;
JS部分: alert(img.complete);----->false
img.src="图片";
alert(img.complete);------->//如果上面“图片”获取的时间比JS代码顺序执行的时间要长,那么这里就是false,否则就是true。
下面看一个例子:
<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;
};
};
};
img的complete和onload的更多相关文章
- WEB界面onload前的加载流程❤❤
开始的流程: 1.先发请求给DNS进行域名解析获取服务器IP 2.向步骤1获取的服务器IP发送HTTP请求 //服务器的内部处理 3.服务器接收请求后,解析主机头对应的站点,把请求传送给站点 //返回 ...
- javascript创建css、js,onload触发callback兼容主流浏览器的实现
http://www.fantxi.com/blog/archives/load-css-js-callback/ 由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js.c ...
- JS魔法堂:IMG元素加载行为详解
一.前言 在<JS魔法堂:jsDeferred源码剖析>中我们了解到img元素加载失败可以作为函数异步执行的优化方案,本文打算对img元素的加载行为进行更深入的探讨. 二.资源加载的相关属 ...
- JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
- 通过url获取图片尺寸的几种方法:JS和php
首先是js的方法,通过new一个Image对象,设置src属性,并监听complete和onload事件,图片加载完成后输出图片的宽度和高度 function checkPicurl(url){ va ...
- Egret官方案例学习笔记
1.资源记载方式 (1)Egret引擎是2.0.5. (2)resource/resource.json文件是: { "resources": [ { "name&quo ...
- 常用js,css文件统一加载方法,并在加载之后调用回调函数
原创内容,转载请注明出处! 为了方便资源管理和提升工作效率,常用的js和css文件的加载应该放在一个统一文件里面完成,也方便后续的资源维护.所以我用js写了以下方法,存放在“sourceControl ...
- JS 动态加载脚本 执行回调_转
关于在javascript里面加载其它的js文件的问题可能很多人都遇到过,但很多朋友可能并不知道怎么判断我们要加载的js文件是否加载完成,如果没有加载完成我们就调用文件里面的函数是不会成功的.本文讲解 ...
- 转载:JS快速获取图片宽高的方法
快速获取图片的宽高其实是为了预先做好排版样式布局做准备,通过快速获取图片宽高的方法比onload方法要节省很多时间,甚至一分钟以上都有可能,并且这种方法适用主流浏览器包括IE低版本浏览器. 我们一步一 ...
随机推荐
- Linux-cut命令(22)
cut剪切命令cut命令通常用来对某个文本文件进行解析,擅长处理以一个字符间隔的文本内容 -b :以字节(bytes)为单位进行分割.这些字节位置将忽略多字节字符边界,除非也指定了 -n 标志. -c ...
- spring_04bean的生命周期
一.前言 spring框架中的bean对象生命周期是面试时常考的问题 往往笔试,面试总喜欢问生命周期的问题 二.spring_bean应用上下文生命周期图: 三.生命周期流程(bean应用上下文): ...
- Docker 系列六(Docker Swarm 项目).
一.前言 随着互联网快速发展,以及微服务架构的流行,服务器的压力越来越大.上一篇介绍的 Docker Compose 项目,可以将多个容器捏合在一起,实现容器间的通信,比如 Web 项目对 DB.Ca ...
- php 设计模式之单例模式
单例模式的关键点 1.//私有构造函数,防止直接new 创建实例 2.//设置静态成员变量 作保存实例 3.//公有访问实例的静态方法 4.//防止克隆对象的方法 上代码: //单例模式 class ...
- blfs(systemd版本)学习笔记-构建gnome桌面系统
我的邮箱地址:zytrenren@163.com欢迎大家交流学习纠错! 大概思路: lfs(系统)+xorg(驱动)+gnome(桌面组件) 链接: lfs(systemd版本)学习笔记系列:http ...
- svn checkout 实用小技巧
svn checkout 实用小技巧 by:授客 QQ:1033553122 问题描述: 用svn小乌龟软件,进行update,commit之前,先要把svn工作目录checkout到本地,那么问 ...
- doc命令大全(详细版)
doc命令大全(详细版) 1 echo 和 @回显命令@ #关闭单行回显echo off #从下一行开始关闭回显@echo ...
- OkHttp3源码详解(五) okhttp连接池复用机制
1.概述 提高网络性能优化,很重要的一点就是降低延迟和提升响应速度. 通常我们在浏览器中发起请求的时候header部分往往是这样的 keep-alive 就是浏览器和服务端之间保持长连接,这个连接是可 ...
- Testlink1.9.17使用方法( 第三章 初始配置[配置用户、产品] )
第三章 初始配置(配置用户.产品) 一. 设置用户 QQ交流群:585499566 在TestLink系统中,每个用户都可以维护自己的私有信息.admin可以创建用户,但不能看到其它用户的密码.在用户 ...
- ubuntu 安装PG10 更新packet 创建超级账号
ubuntu 安装PG10 更新packet 创建超级账号 安装pg10 我的环境是16.04 server版本 MAC和windows 建议使用安装包 直接官网下载 echo 'deb http:/ ...