img对象onload事件和complete属性关系

最新推荐文章于 2023-04-19 20:38:13 发布
最新推荐文章于 2023-04-19 20:38:13 发布
阅读量1.2k 收藏 1
点赞数
分类专栏： 前端 # Javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Simoral/article/details/94555263
版权

img对象onload事件和complete属性关系

这篇文章算是对之前那篇canvas合成图片文章的补充，主要是阐述何时使用onload，何时又可以不使用onload。

文章目录

onload

onload 事件会在页面或图像加载完成后立即发生。
onload 通常用于 元素，在页面完全载入后(包括图片、css文件等等)执行脚本代码。

支持onload的标签：

<body>
<frame>
<frameset>
<iframe>
<input type="image">
<link>
<script>
<style>

complete

complete 属性可返回浏览器是否已完成对图像的加载。
如果加载完成，则返回 true，否则返回 fasle。

let img = new Image();
img.src = "./test.png";
if (img.complete) {
	// Do something
} else {
	img.onload() {
		// Do something
	}
}

onload & complete 联系

页面首次登录会直接进入 onload 回调，但是页面刷新或者重新进入，图片已经缓存过后，不会进入 onload 回调，这个时候就需要用 complete 回调。

if (img.complete) {
	// Do something
} else {
	img.onload() {
		// Do something
	}
}

参考链接

感谢
[1] w3school HTML DOM complete 属性
[2] 菜鸟教程 onload 事件

Simorel
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
img的complete和onload
weixin_34062329的博客
07-02 1353
HTML DOM complete 属性 定义和用法: complete 属性可返回浏览器是否已完成对图像的加载。 如果加载完成，则返回 true，否则返回 fasle。 语法: imageObject.complete Image onload 事件 定义和用法: onload 事件在图片加载完成后立即执行。 语法 onload="JavaScri...
图片onload事件详解，兼容所有浏览器！
weixin_30807779的博客
06-20 303
做过图片翻转效果的朋友其实都知道，要让图片轮换的时候不出现等待，最好是先让 图片下载到本地，让浏览器缓存起来。这时，一般都会用到js里边的Image对象。一般的手段无非这样：function preLoadImg(url) {　　var img = new Image();　　img.src = url;}通过调用preLoadImg函数，传入图片的url，就能使图片预先下载下来了。实际...
JavaScript与Image加载事件(onload)、加载状态(complete)
10-28
以前写过一个图片等比缩放的Js函数，缺陷是要等到所有图片都加载完毕了，才能进行等比缩放。
img.onload事件和img.complete属性的简介和应用
06-29 186
img.onload是当一张图片被加载完成后所触发的事件 实现图片显示功能； js部分：img.src="图片"; img.onload=showImg； function showImg() { 代码部分。。。。 } 对于 complete 属性来讲，IE是根据图片是否显示过来判断，就是说当加载的图片显示出来后，complete 属性的值才为 tru...
img的complete跟onload（可有人懂最后的问题彩蛋）
微也的博客
09-26 7408
在图片预加载编码的时候看到onload跟complete，思考，onload跟complete有什么区别？测试在chrome环境下。 动手实践，编了一小段简单的测试代码 document.getElementById('load').onclick = function() { var img = new Image(); img.src="images/1-logo.png"
php判断图片加载完,JavaScript与Image加载事件(onload)、加载状态(complete)
weixin_35626408的博客
03-10 199
以前写过一个图片等比缩放的Js函数，缺陷是要等到所有图片都加载完毕了，才能进行等比缩放。昨天用jQuery插件aeImageResize，发现它更有优势：每张图片加载完后，会马上进行等比缩放。这归于图片对象Image的加载事件onload的功劳。查看插件的源码，发现它也依赖图片对象的complete属性和onload事件，并且特别把IE6区分对待，到底IE6在图片加载对象上，与其它浏览器有什么不同...
js 实现图片预加载(js操作 Image对象属性complete ，事件onload 异步加载图片)
12-04
看个例子： 代码如下: <input type=”button” name=”... Img.onload = function () { document.body.appendChild(Img); } } //–> [removed] 当包含上述代码的页面打开时并不载入 “tt.jpg” ，当点击按钮时候才载
IE iframe的onload方法分析小结
09-05
这种方法的优点是它不仅适用于`<iframe>`，还适用于其他元素，如`<img>`和`<script>`。但是，`readystatechange`事件可能会比`onload`事件更频繁地触发，因此在某些情况下可能需要额外的逻辑来确保内容确实已经加载...
img.readyState!= complete 权限问题 也是一个无用题
07-27
例如，我们可以使用`img.naturalWidth`和`img.naturalHeight`来获取图像的实际尺寸，或者在`img.onload`事件中计算`img.width`和`img.height`以获取渲染后的尺寸。这样，即使在图片加载过程中遇到问题，也能通过这些...
JavaScript Image对象实现原理实例解析
10-14
一、Image对象属性 1. `align`：设置或返回图像与周围内容的对齐方式，但在现代浏览器中，更推荐使用CSS的`float`属性来实现对齐效果。 2. `alt`：设置或返回当图像无法显示（例如，因为网络问题或用户禁用了图像）...
Glide源码解析05-onLoadComplete
朱豪凯的博客
05-15 934
Glide源码解析05-onLoadComplete在Glide源码解析03中我们以及看到Glide调用了EngineRunnable#onLoadFailed或者EngineRunnable#onLoadComplete来调用失败或成功的结果。 这里我们来详细看下onLoadComplete，onLoadFailed也是同样的逻辑。 if (resource == null) {
JavaEE练习项目--快递e栈（第二天）
程序员小章的博客
10-03 598
JavaEE练习项目–快递e栈（第二天） 1.创建数据库 管理员表 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-pNakF5bp-1601707285725)(C:\Users\Faker\Desktop\快递e站项目练习第一天.assets\image-20201003140324264.png)] 用户表 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-D1lYCJWp-1601707285728)(C:\Users\Faker\Deskt
img.onload 实现图片预加载方法
热门推荐
kongjiea笔记
04-22 8万+
例子： 1111 function loadImage(url,callback) { var img =new Image(); img.onload =function(){ img.onload =null; callback(img); }
IMG 标签的 onload 和 onerror 事件
qross的博客
06-01 1万+
IMG 标签一般用来加载图片，在某些情况下，还会用来做些特别的事，如记录页面访问量，老吴在很多年前见过这种玩法。除了 document 和 window 对象之外，IMG 标签是少有的几个支持 和事件的标签之一，其他还有 SCRIPT、LINK、FRAME、IFRAME 标签等，即只要有外部文件引用的标签。还有一个事件，这里不讨论。
JavaScript 中的图像加载事件
six6de6的博客
08-18 2895
JavaScript 中的图像加载事件的简单解析
img.onload知识点归纳总结
ZLJ925的博客
09-10 9291
前言： 在使用onload的时候，我们总是会看到各种建议，以及在不同浏览器上的不同表现，这些别人总结的经验都不是一蹴而就的，都是在不断的敲代码，不断的试错，测试，优化只有才从坑里爬出来的。只有在遇到不明白的地方，努力搞明白，动手敲几遍，知识才是自己的。个人愚见～_~,不废话了…先看一份代码：<body> <div class="box"> <div> 1111</div>
image的加载事件(onload)和加载状态(complete)
苍穹之上倚天长鸣的博客
04-01 2668
之前做过这样一个需求，要让商家页的商家图片按照图片外面box的大小等比例缩放。之前的想法是在页面中先输出图片的src，然后在页面底部初始化js，然后在js中写相应的可以使图片按照box的大小等比例缩放的函数。要实现图片的等比例缩放要做到以下几点， 第一，得到图片的width和height 第二，比较图片的width和height与box的width的height的大小，共有四种情况，
img图片onload事件
weixin_30399055的博客
12-03 964
window.onload事件是在页面dom元素加载完后执行，也就包括了img图片中src加载完成，那么img.onload 就不会执行了。 $("img").each(function () { var src = $(this).attr("src"); $(this).attr("src",""); $(this).get(0).onload = function ...
关于uniapp中＜image＞标签@load事件不执行的问题
qq_61267719的博客
04-19 2157
uniapp标签@load事件不执行问题
使用 window.onload 和 document.readyState 来判断页面是否已经加载完毕，然后再使用 document.getElementsByTagName 获取页面中的所有图片、音频等元素，遍历判断每个元素的 complete 属性是否为 true
最新发布
06-12
是的，你可以使用以下代码来实现： ```javascript window.onload = function() { if (document.readyState === 'complete') { var elements = document.getElementsByTagName('img'); for (var i = 0; i < elements.length; i++) { if (!elements[i].complete) { elements[i].onload = function() { // 图片加载完毕后的操作 } } else { // 图片已经加载完毕的操作 } } // 同样的方式可以判断音频等元素的加载情况 } } ``` 这段代码会在页面加载完毕后执行，然后遍历页面中的所有图片元素，判断每个元素的 `complete` 属性是否为 `true`。如果不是，则给该元素添加 `onload` 事件，在图片加载完毕后执行相应的操作。如果已经加载完毕，则直接执行相应的操作。对于音频等元素，可以使用类似的方法来判断。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值