文档章节

JS判断图片是否加载完成

ZYallers
 ZYallers
发布于 2017/07/20 12:49
字数 167
阅读 3
收藏 0

JS判断图片是否加载完成

有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。这里介绍一种方法。是通过img的compete属性。

<!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则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。

© 著作权归作者所有

ZYallers
粉丝 1
博文 59
码字总数 19100
作品 0
佛山
程序员
私信 提问
爬虫获取 js 动态数据 (1)

爬虫遇到 js 动态数据时,主要解决方法有两种: 使用一些库,例如 Selenium,来模拟浏览器环境抓取数据。但这样做对内存和 CPU 的消耗都比较大,爬虫效率低,应尽量避免。 手动分析 js 请求,...

anye137
2018/06/05
0
0
响应式Web设计(四):响应式Web设计的优化

这篇文章主要说说在进行响应式Web设计的过程中,涉及到页面的一些需要进行优化的地方: 1、 轻量级的Javascript库: 针对PC端网页当然会首选jQuery来作为前端javascript库,但是针对移动端来...

幸福2胖纸
2013/05/06
4.3K
23
[swift]-使用JavaScript解决WKWebView无法发送POST参数问题

基本实现思路: 1. 将一个包含JavaScript的POST请求的HTML代码放到工程目录中2. 加载这个包含JavaScript的POST请求的代码到WKWebView3. 加载完成之后,用Native调用JavaScript的POST方法并传入...

xiaoLoo
2018/07/10
178
0
再谈DOMContentLoaded与渲染阻塞—分析html页面事件与资源加载

浏览器的多线程中,有的线程负责加载资源,有的线程负责执行脚本,有的线程负责渲染界面,有的线程负责轮询、监听用户事件。 这些线程,根据浏览器自身特点以及web标准等等,有的会被浏览器特...

zhoulujun
2018/05/22
0
0
javascript创建css、js,onload触发callback兼容主流浏览器的实现

由于需要写个函数,既可以加载css,又可以加载js,所以对各主流浏览器对加载js、css后是否触发onload事件做了个测试。当然,为了兼容,首先要考虑的是会用到onload和onreadystatechange,但他...

bosscheng
2015/10/26
3
0

没有更多内容

加载失败,请刷新页面

加载更多

DDD(五)

1、引言 之前学习了解了DDD中实体这一概念,那么接下来需要了解的就是值对象、唯一标识。值对象,值就是数字1、2、3,字符串“1”,“2”,“3”,值时对象的特征,对象是一个事物的具体描述...

MrYuZixian
今天
3
0
数据库中间件MyCat

什么是MyCat? 查看官网的介绍是这样说的 一个彻底开源的,面向企业应用开发的大数据库集群 支持事务、ACID、可以替代MySQL的加强版数据库 一个可以视为MySQL集群的企业级数据库,用来替代昂贵...

沉浮_
今天
4
0
解决Mac下VSCode打开zsh乱码

1.乱码问题 iTerm2终端使用Zsh,并且配置Zsh主题,该主题主题需要安装字体来支持箭头效果,在iTerm2中设置这个字体,但是VSCode里这个箭头还是显示乱码。 iTerm2展示如下: VSCode展示如下: 2...

HelloDeveloper
今天
6
0
常用物流快递单号查询接口种类及对接方法

目前快递查询接口有两种方式可以对接,一是和顺丰、圆通、中通、天天、韵达、德邦这些快递公司一一对接接口,二是和快递鸟这样第三方集成接口一次性对接多家常用快递。第一种耗费时间长,但是...

程序的小猿
今天
6
0
Python机器学习之数据探索可视化库yellowbrick

背景介绍 从学sklearn时,除了算法的坎要过,还得学习matplotlib可视化,对我的实践应用而言,可视化更重要一些,然而matplotlib的易用性和美观性确实不敢恭维。陆续使用过plotly、seaborn,...

yeayee
今天
8
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部