JavaScript实现判断图片是否加载完成的3种方法整理


Posted in Javascript onMarch 13, 2015

有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的javascipt判断图片加载完成时的方法,并通过代码与实际应用相结合进行解释与说明。

onload方法

通过向img标签添加onload属性,并填入相应的函数来执行后续的javascipt代码。如下代码例子中img元素默认是不显示的,通过onload判断加载完成后再将图片显示出来。

<img class="pic1" onload="get(this)" src="..." style='display:none' />

 

<script type="text/javascript">

function get(ts){

 ts.style.display = 'block';  //显示图片

}

</script>

优点:可以将javascript代码部分放置于页面的任何部分加载,并且可以用于多数任意图片上。使用比较简单,易理解。

缺点:必须在每个标签上都贴上onlaod属性,在某些无法直接操作HTML代码,或者需要代码精简的情况下不适用

javascipt原生方法

选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示。

<img id="pic1" src="..." />

 

<script language="JavaScript">

    document.getElementById("pic1").onload = function () {

        alert("图片加载已完成");

    }

</script>

优点:简单易用,不影响HTML代码。

缺点:只能指定一个元素,javascipt代码必须置于图片元素的下方

jquery方法

为每个class为pic1的图片元素绑定事件,通过jquery的load方法,将元素渐现出来。

注意,不要在$(document).ready()里绑定load事件。

<script type="text/javascript">

$(function(){

 $('.pic1').each(function() {

  $(this).load(function(){

   $(this).fadeIn();

  });

    });

})

</script>

优点:可以批量绑定元素事件,并且不影响HTML代码内容

缺点:需要jquery库的支持,代码需要放置到需要操作元素的下方。

Javascript 相关文章推荐
JavaScript 参考教程
Dec 29 Javascript
jQuery 全选效果实现代码
Mar 23 Javascript
DD_belatedPNG,IE6下PNG透明解决方案(国外)
Dec 06 Javascript
jquery图片切换实例分析
Apr 15 Javascript
AngularJS表单提交实例详解
Feb 18 Javascript
关于vue.js过渡css类名的理解(推荐)
Apr 10 Javascript
label+input实现按钮开关切换效果的实例
Aug 16 Javascript
解决vue处理axios post请求传参的问题
Mar 05 Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 Javascript
layui加载表格,绑定新增,编辑删除,查看按钮事件的例子
Sep 06 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
Dec 18 Javascript
Antd的Table组件嵌套Table以及选择框联动操作
Oct 24 Javascript
JavaScript检查弹出窗口是否被阻拦的方法技巧
Mar 13 #Javascript
JavaScript中常用的六种互动方法示例
Mar 13 #Javascript
jQuery.position()方法获取不到值的安全替换方法
Mar 13 #Javascript
检测一个函数是否是JavaScript原生函数的小技巧
Mar 13 #Javascript
DOM操作一些常用的属性汇总
Mar 13 #Javascript
JavaScript获取页面上被选中文字的方法技巧
Mar 13 #Javascript
jQuery源码分析之Callbacks详解
Mar 13 #Javascript
You might like
PHP中数据类型转换的三种方式
2015/04/02 PHP
ThinkPHP中order()使用方法详解
2016/04/19 PHP
Ajax+PHP实现的模拟进度条功能示例
2019/02/11 PHP
javascript中的缓动效果实现程序
2012/12/29 Javascript
Javascript中判断变量是数组还是对象(array还是object)
2013/08/14 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
JS实现简单的天数计算器完整实例
2017/04/28 Javascript
nodejs集成sqlite使用示例
2017/06/05 NodeJs
关于javascript sort()排序你可能忽略的一点理解
2017/07/18 Javascript
微信小程序 自定义消息提示框
2017/08/06 Javascript
Vue项目中如何引入icon图标
2018/03/28 Javascript
详解在vue-cli项目下简单使用mockjs模拟数据
2018/10/19 Javascript
vue中引入第三方字体文件的方法示例
2018/12/17 Javascript
vue.js的简单自动求和计算实例
2019/11/08 Javascript
JS动态图片的实现方法完整示例
2020/01/13 Javascript
Vue+axios封装请求实现前后端分离
2020/10/23 Javascript
python使用datetime模块计算各种时间间隔的方法
2015/03/24 Python
Python中的map()函数和reduce()函数的用法
2015/04/27 Python
Python xlrd读取excel日期类型的2种方法
2015/04/28 Python
Python之ReportLab绘制条形码和二维码的实例
2018/01/15 Python
python事件驱动event实现详解
2018/11/21 Python
Pytorch GPU显存充足却显示out of memory的解决方式
2020/01/13 Python
使用Keras画神经网络准确性图教程
2020/06/15 Python
Numpy 多维数据数组的实现
2020/06/18 Python
Python定时任务框架APScheduler原理及常用代码
2020/10/05 Python
Python代码覆盖率统计工具coverage.py用法详解
2020/11/25 Python
python statsmodel的使用
2020/12/21 Python
如何在Canvas中添加事件的方法示例
2019/05/21 HTML / CSS
波兰品牌鞋履在线商店:Eastend.pl
2020/01/11 全球购物
面试自我介绍演讲稿
2014/04/29 职场文书
放飞梦想演讲稿
2014/05/05 职场文书
2015年元旦标语大全
2014/12/09 职场文书
护士爱岗敬业心得体会
2016/01/25 职场文书
Python打包exe时各种异常处理方案总结
2021/05/18 Python
Python识别花卉种类鉴定网络热门植物并自动整理分类
2022/04/08 Python