JS判断图片是否加载完成方法汇总(最新版)
2019/6/27 22:25:58
本文主要是介绍JS判断图片是否加载完成方法汇总(最新版),对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
有时需要获取图片的尺寸,这需要在图片加载完成以后才可以。下面小编给大家整理了几种关于JS判断图片是否加载完成方法汇总,一起看看吧。
一、load事件
<script type="text/javascript"> $('img').onload = function() { //code } </script>
优点:简单易用,不影响HTML代码。
缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方
二、jquery方法
<script type="text/javascript"> $(function(){ $('.pic1').each(function() { $(this).load(function(){ $(this).fadeIn(); }); }); }) </script>
注意,不要在$(document).ready()里绑定load事件。
优点:可以批量绑定元素事件,并且不影响HTML代码内容
缺点:需要jquery库的支持,代码需要放置到需要操作元素的下方。
三、readystatechange事件
<!DOCTYPE HTML> <html> <head> <meta charset="utf-"> <title>img - readystatechange event</title> </head> <body> <img id="img" src="http://pic.win.com/wallpaper/f/cbbaea.jpg"> <p id="p">loading...</p> <script type="text/javascript"> img.onreadystatechange = function() { if(img.readyState=="complete"||img.readyState=="loaded"){ p.innerHTML = 'readystatechange:loaded' } } </script> </body> </html>
readyState为complete和loaded则表明图片已经加载完毕。测试IE6-IE10支持该事件,其它浏览器不支持。
四、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则表明图片已经加载完毕,停止轮询。该属性所有浏览器都支持。
以上内容是小编给大家介绍的JS判断图片是否加载完成方法汇总,希望对大家有所帮助,同时也非常感谢大家对找一找教程网网站的支持!
这篇关于JS判断图片是否加载完成方法汇总(最新版)的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-05-30React Native常用组件-点击组件
- 2024-05-30uniapp+vue3+uv-ui手机端后台OA管理模板
- 2024-05-29Python网络爬虫的时候json=就是让你少写个json.dumps()
- 2024-05-27React Native常用组件-展示组件
- 2024-05-27React Native常用组件-列表组件
- 2024-05-09vue3开发前端表单缓存自定义指令,移动端h5必备插件
- 2024-05-09React Hooks在class组件中的使用方式
- 2024-03-30[OIDC in Action] 2. 基于OIDC(OpenID Connect)的SSO(纯JS客户端)
- 2024-03-29terraform jsonencode
- 2024-03-13vuex-persist