JavaScript实现判断图片是否加载完成的3种方法整理
作者:junjie 时间:2024-04-23 09:24:26
有时候我们在前端开发工作中为了获取图片的信息,需要在图片加载完成后才可以正确的获取到图片的大小尺寸,并且执行相应的回调函数使图片产生某种显示效果。本文主要整理了几种常见的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,判断,图片,加载完成
0
投稿
猜你喜欢
OpenCV 绘制同心圆的示例代码
2021-05-19 16:49:40
django执行原生SQL查询的实现
2023-11-11 13:34:04
简述python四种分词工具,盘点哪个更好用?
2021-08-22 23:28:01
python变量赋值方法(可变与不可变)
2021-02-14 08:51:55
深入理解Python中的 __new__ 和 __init__及区别介绍
2022-11-15 12:23:36
用Dreamweaver 4.0编制会议通知
2010-10-20 20:06:00
浅谈js的html元素的父节点,子节点
2024-04-23 09:31:56
python 中 lxml 的 etree 标签解析
2023-02-26 02:59:37
pygame学习笔记(5):游戏精灵
2021-10-13 18:29:56
Django-xadmin后台导入json数据及后台显示信息图标和主题更改方式
2021-01-07 20:38:33
Perl哈希表用法解析
2023-08-23 19:12:48
浅析is_writable的php实现
2023-09-09 01:41:05
mpvue跳转页面及注意事项
2024-05-02 16:09:57
opencv之颜色过滤只留下图片中的红色区域操作
2021-04-03 19:15:28
解决MySQL数据库中与优化器有关的问题
2008-12-17 16:18:00
mysql学习笔记之帮助文档
2024-01-19 08:14:36
Golang的os标准库中常用函数的整理介绍
2024-05-05 09:29:59
带你深入了解MySQL数据库系统参数的优化
2009-03-06 17:58:00
Python 如何将integer转化为罗马数(3999以内)
2023-01-19 12:46:51
Python3.5内置模块之time与datetime模块用法实例分析
2023-11-02 23:25:35