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 相关文章推荐
用于自动添加Digg This!按钮的JavaScript
Dec 23 Javascript
JavaScript高级程序设计(第3版)学习笔记6 初识js对象
Oct 11 Javascript
javascript如何创建对象
Aug 29 Javascript
js实现可输入可选择的select下拉框
Dec 21 Javascript
js使用html2canvas实现屏幕截取的示例代码
Aug 28 Javascript
微信小程序 input表单与redio及下拉列表的使用实例
Sep 20 Javascript
在vue项目中使用md5加密的方法
Sep 14 Javascript
微信上传视频文件提示(推荐)
Nov 22 Javascript
详解jquery和vue对比
Apr 16 jQuery
JS apply用法总结和使用场景实例分析
Mar 14 Javascript
手机浏览器唤起微信分享(JS)
Oct 11 Javascript
浅析微信小程序自定义日历组件及flex布局最后一行对齐问题
Oct 29 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 字符串函数收集
2010/03/29 PHP
php生成短网址示例
2014/05/05 PHP
php实现的SSO单点登录系统接入功能示例分析
2016/10/12 PHP
php通过header发送自定义数据方法
2018/01/18 PHP
PHPStorm 2020.1 调试 Nodejs的多种方法详解
2020/09/17 NodeJs
一直复略了的一个问题,关于表单重复提交
2007/02/15 Javascript
JavaScript(JS) 压缩 / 混淆 / 格式化 批处理工具
2010/12/10 Javascript
jquery实现文字由下到上循环滚动的实例代码
2013/08/09 Javascript
探寻Javascript执行效率问题
2014/11/12 Javascript
jquery获取文档高度和窗口高度汇总
2016/01/25 Javascript
JavaScript关于提高网站性能的几点建议(一)
2016/07/24 Javascript
浅谈JS读取DOM对象(标签)的自定义属性
2016/11/21 Javascript
JavaScript事件处理程序详解
2017/09/19 Javascript
JS使用正则表达式获取小括号、中括号及花括号内容的方法示例
2018/06/01 Javascript
vue-router中的hash和history两种模式的区别
2018/07/17 Javascript
axios实现文件上传并获取进度
2020/03/25 Javascript
JS在Array数组中按指定位置删除或添加元素对象方法示例
2019/11/19 Javascript
解决vue 使用axios.all()方法发起多个请求控制台报错的问题
2020/11/09 Javascript
JavaScript中clientWidth,offsetWidth,scrollWidth的区别
2021/01/25 Javascript
[01:03:13]VG vs Pain 2018国际邀请赛小组赛BO2 第一场 8.18
2018/08/19 DOTA
浅谈Python采集网页时正则表达式匹配换行符的问题
2018/12/20 Python
pyqt5 textEdit、lineEdit操作的示例代码
2020/08/12 Python
Pytorch之Tensor和Numpy之间的转换的实现方法
2020/09/03 Python
深入剖析webstorage[html5的本地数据处理]
2016/07/11 HTML / CSS
机关节能减排实施方案
2014/03/17 职场文书
治超工作实施方案
2014/05/04 职场文书
师范生求职信
2014/06/14 职场文书
美术第二课堂活动总结
2014/07/08 职场文书
教师一帮一活动总结
2014/07/08 职场文书
领导班子四风对照检查材料范文
2014/09/27 职场文书
党委工作总结2015
2015/04/27 职场文书
运动会通讯稿50字
2015/07/20 职场文书
公司考勤管理制度
2015/08/04 职场文书
2016年党员创先争优承诺书
2016/03/25 职场文书
Python echarts实现数据可视化实例详解
2022/03/03 Python
python套接字socket通信
2022/04/01 Python