如何判断img加载完成?_img 加载完成事件_zxxxxxxxxxxxz的博客-程序员宅基地

技术标签: html  

一、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/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        img1.onload = function() {

            p1.innerHTML = 'loaded'

        }

    </script>

</body>

</html> 

 

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

二、readystatechange事件

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - readystatechange event</title>

</head> 

<body>

    <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>

</body>

</html> 

三、img的complete属性

<!DOCTYPE HTML>

<html> 

<head> 

    <meta charset="utf-8">

    <title>img - complete attribute</title>

</head> 

<body>

    <img id="img1" src="http://pic1.win4000.com/wallpaper/f/51c3bb99a21ea.jpg">

    <p id="p1">loading...</p>

    <script type="text/javascript">

        function imgLoad(img, callback) {

            var timer = setInterval(function() {

                if (img.complete) {

                    callback(img)

                    clearInterval(timer)

                }

            }, 50)

        }

        imgLoad(img1, function() {

            p1.innerHTML('加载完毕')

        })

    </script>

</body>

</html> 

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

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/zxxxxxxxxxxxz/article/details/109760905

智能推荐

selenium 状态码521_selenium_页面(status code)状态码校验_丁先生的酥心糖的博客-程序员宅基地

校验访问网页是否正常打开,比较简单的方法就是通过校验状态码是否为 200 ,所以特意总结了常用状态码:code = {100 :'Continue',101 : 'Switching Protocols',102:'Processing',118 :'Connection timed out',200 : 'OK',201 : 'Created',202 : 'Accepted',203 : 'N...

MySQL练习-employees数据库(一)_aiqituo9030的博客-程序员宅基地

安装一个数据库示例——employees使用工具为Navicat——(ctrl + q: 打开新查询窗口ctrl + r: 运行当前窗口内的所有语句)参考http://www.cnblogs.com/chenyucong/p/5734800.html该数据库中有6张关联,记录的数据为某一公司9个部门所有员工的薪资(包括离职员工),以下为关系图。第一...

@deprecated 注解的使用_tangyiss的博客-程序员宅基地

一、作用用 @Deprecated注解的程序元素,不鼓励程序员使用这样的元素,通常是因为它很危险或存在更好的选择。在使用不被赞成的程序元素或在不被赞成的代码中执行重写时,编译器会发出警告。二、传递性如果一个类被使用了@Deprecated注解,在调用这个类的地方IDE会给出提示。但如果调用这个类的字类IDE会进行提示吗?/** * @author tangyi * ...

c_select 调用参数说明_weixin_30698297的博客-程序员宅基地

c_select 调用1. select系统调用select系统调用是用来让我们的程序监视多个文件描述符的状态变化的。程序会停在select这里等待,直到被监视的文件描述符有某一个或多个发生了状态改变。select()的机制中提供一fd_set的数据结构,实际上是一long类型的数组,每一个数组元素都能与一打开的文件句柄建立联系,建立联系的工作由程序员完成,当调用select()时,由内核根据...

Python课程-程序员宅基地

Python课程p1 爬虫简介通过编写程序,模拟浏览器上网,然后让其去互联网抓取数据的过程.爬虫的价值:p2 爬虫的合法性探究p3 爬虫初始深入抓取页面爬虫在使用场景中的分类:爬虫中的矛与盾反爬机制门户网站,可以通过制定相关策略或者技术手段,防止爬虫程序进行网站数据的爬取。反反爬策略 爬虫程序可以通过制定相关的策略或者技术手段,破解门户网站中具备的反爬机制,从而可以获得门户网站信息。 robots.txt协议 君子协议。规定了网站中哪些数据可以被爬

python机器学习第四章:数据预处理——构建好的训练数据集_乐乐大鱼塘的博客-程序员宅基地

1、缺失数据的处理知识点1:通过dropna方法将存在缺失值的特征或者样本删除#remove rows that contain missing values df.dropna(axis=0) #remove columns that contain missing values df.dropna(axis=1)#only drop rows where all columns ...

随便推点

烟雾检测_手机检测周围烟雾_chasephd的博客-程序员宅基地

代码已整理好,国庆期间整理好文章。

理解深度学习中的正则化_ColdCabbage的博客-程序员宅基地

写在前面:这篇文章虽然公式有点多,但很好懂的。 用Markdown写的,手机端可能会乱码。 &amp;amp;amp;nbsp; &amp;amp;amp;nbsp; 本文介绍了对深度学习中正则化的理解,分为以下几部分:什么是正则化?为什么要正则化?怎样理解正则化?举例 &amp;amp;amp;nbsp;首先从“什么是正则化”开始。正则化方法很早之前就已经出现了,在机器学习方法中应用广泛,比如支持向量机(这个不知道也没关系)。它的...

Python_杨辉三角-金字塔版_瑞 新的博客-程序员宅基地

#杨辉三角-金字塔版'''注意:迭代对象1金字塔的数字列表2列表数值转str类型.center居中'''def triangle(): N = [1] while True: yield N # generator特点在于:在执行过程中,遇到yield就中断,下次又继续执行 L = N.copy() # 我们需要吧N复制给L,而不能...

Meterphere安装及使用_metersphere安装使用_源哥学的博客-程序员宅基地

MeterPhere安装1、打开Xshell 5 ,输入ssh IP地址连接操作系统2、输入用户名和密码后连接虚拟机3、输入ping IP地址,检测一下系统是否可以访问外网,如果能ping通外网IP说明可以访问4、输入curl -sSL https://github地址/metersphere/metersphere/releases/latest/download/quick_start.sh | sh 开始在线安装5、等待在线安装结束,安装成功6、打开浏览器,访问http://IP地址:80

JAVA-G1垃圾回收器介绍_中年油泥大叔-vick的博客-程序员宅基地

一、概述  G1垃圾回收器是在Java7 update 4之后引入的一个新的垃圾回收器。G1是一个分代的,增量的,并行与并发的标记-复制垃圾回收器。它的设计目标是为了适应现在不断扩大的内存和不断增加的处理器数量,进一步降低暂停时间(pause time),同时兼顾良好的吞吐量。G1回收器和CMS比起来,有以下不同:G1垃圾回收器是compacting的,因此其回收得到的空间是连续的。这避免了CMS回收器因为不连续空间所造成的问题。如需要更大的堆空间,更多的floating garbage。连续空间意味

ubuntu 18.04 +anconda+spyder+tensorflow_哈哈哈,冲冲冲的博客-程序员宅基地

[email protected]:~$ cd [email protected]:~/Desktop$ bash Anaconda3-5.2.0-Linux-x86_64.shWelcome to Anaconda3 5.2.0In order to c...

推荐文章

热门文章

相关标签