1.img的complete属性

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

<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<script>
function imgLoad(img, callcack) {
var timer = setInterval(function () {
if (img.complete) {//判断图片是否加载完成
callcack(img)
clearInterval(timer);
}
}, 50);
}
imgLoad(img1, function () {
p1.innerHTML = '加载完成';
});
</script>

判断图片是否在缓存中已经存在

<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<img id="img2" />
<script>
//证明complete 属性不仅可以判断图片是否加载成功,还可以判断图片是否已经在缓存中存在
console.info(img1.complete)
setTimeout(function () {
if (img1.complete) {
console.info('加载成功' + img1.src);
img2.src = img1.src;
if (img2.complete) {
console.info('img2加载成功');
}
} else { }
}, 100);
</script>

2.Load事件

<p id="p1"></p>
<img id="img1" src="../Images/1.jpg" />
<script>
//图片加载成功触发事件
img1.onload = function () {
alert(3);
p1.innerHTML = "图片加载成功";
}
</script>

测试,所有浏览器都显示出了“loaded”,说明所有浏览器都支持img的load事件

3.readystatechange事件

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

<img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">
<p id="p1">loading...</p>
<script type="text/javascript">
img1.onreadystatechange = function() {
if(img1.readyState=="complete"||img1.readyState=="loaded"){
p1.innerHTML = 'readystatechange:loaded'
}
}
</script>

JS判断图片是否加载完成三种方式的更多相关文章

  1. HBase协处理器加载的三种方式

    本文主要给大家罗列了HBase协处理器加载的三种方式:Shell加载(动态).Api加载(动态).配置文件加载(静态).其中静态加载方式需要重启HBase. 我们假设我们已经有一个现成的需要加载的协处 ...

  2. js 判断图片是否加载完成(使用 onload 事件)

    我们在写 jquery 的时候一般都会写 $(document).ready,加载完成事件还有一个就是 onload onload 与 ready 的区别是: 1.ready 是 DOM 加载完成的事 ...

  3. js判断图片是否加载完毕

    附件: https://www.jb51.net/article/102385.htm 问题:  .offset().top和$(window).scrollTop()每次刷新页面后滚动的值有时候会不 ...

  4. js判断图片是否加载完成

    var img = new Image(); //新建一个图片对象:img.src = ...; //图片地址是你准备要加载的地址:if(img.complete){ //表示图片已经加载完成}

  5. JS异步加载的三种方式

    js加载的缺点:加载工具方法没必要阻塞文档,过得js加载会影响页面效率,一旦网速不好,那么整个网站将等待js加载而不进行后续渲染等工作. 有些工具方法需要按需加载,用到再加载,不用不加载,. 默认正常 ...

  6. Flask程序相关配置加载的三种方式

    方式一:从对象中加载配置 1.定义配置类,在配置类中添加相应的配置 2.通过app.config.from_object(配置类)进行加载 代码如下: from flask import Flask ...

  7. js判断图片是否加载成功

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. 关于JS判断图片是否加载完成且获取图片宽度的方法

    做web的同学们经常会碰到客户上传图片将网页内容区撑破了的情况,下面就这个问题我们一种如何使用js处理这个问题的方法,具体思路就是在js判断客户端的图片下载完毕之后适时的对该图片的宽度或者高度做一些处 ...

  9. js 判断图片是否加载完成

    1.根据url来加载图片: 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 /**  * 加载图片,直到加载完成后才调用回调函数  * @param url 后面读取图片流的u ...

随机推荐

  1. 终于通过了PMP考试,然这只是一个开始。。。

    三个月的辛苦付出,从2015/06/18(本人的生日)开始接受培训,2015/10/6终于收到了PMI发过来的祝贺的邮箱,但是成绩不是很理想.只得了两个B,三个M.但是目标已实现,心情回落. 在这三个 ...

  2. thinkphp 文件下载实例 实现以及注意事项

            #下载        function download()        {             $id=$_GET['id'];              $file_name ...

  3. HTML&CSS基础学习笔记1.28-给网页添加一个css样式

    CSS是什么? 当HTML配合CSS一起使用时,我们发现页面变得好看了很多.那么CSS到底是什么呢? CSS指层叠样式表 (Cascading Style Sheets),它主要是用于定义HTML标签 ...

  4. laravel框架——路由

    基本路由: Route::get('/', function () { return view('welcome'); }); Route::post('/', function () { retur ...

  5. Solr4.8.0源码分析(15) 之 SolrCloud索引深入(2)

    Solr4.8.0源码分析(15) 之 SolrCloud索引深入(2) 上一节主要介绍了SolrCloud分布式索引的整体流程图以及索引链的实现,那么本节开始将分别介绍三个索引过程即LogUpdat ...

  6. JSP前端总结

    一.C标签    一] <c:out value="..." default="..." escapeXml="true">   ...

  7. (2015年郑州轻工业学院ACM校赛题) B迷宫

    这是个简单的广搜题,注意下一下细节都能写出来, 大多数人都少考虑了一点,就是 假如 我的起始点就有一个机关, 并且不是 1 号机关, 这样的话是无结果的.不懂的可以测试一下代码下面的数据 #inclu ...

  8. 【递归】Vijos P1114 FBI树(NOIP2004普及组第三题)

    题目链接: https://vijos.org/p/1114 题目大意: 把01串一分为二,左半边描述当前节点左子树,右半边描述右子树,子树全为1则为I节点,全为0则为B节点,混合则为F节点,直到当前 ...

  9. cryptopp开源库的使用(零):windows下使用visual studio编译

    编译相当简单:打开目录下的sln文件直接编译即可,官方支持到vc2012,我使用vs2013也没有错误,优秀的开源库总是便于使用. 编译的时候注意运行库得选择需要跟使用该库的保持一致,否则会出现重定义 ...

  10. CSS padding margin border属性详解【转载】

    本文转载自:http://www.cnblogs.com/linjiqin/p/3556497.html ,感谢相关博主. 图解CSS padding.margin.border属性 W3C组织建议把 ...