ACCESS DENIED
小Z小Z  2019-08-29 22:03 主机之家测评 隐藏边栏 |   抢沙发  5 
文章评分 0 次,平均分 0.0

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

onload 方法

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

      

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

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

javascipt 原生方法

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

        

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

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

jquery 方法

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

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

  

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

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

声明:1、本博客不从事任何主机及服务器租赁业务,不参与任何交易,也绝非中介。博客内容仅记录博主个人感兴趣的服务器测评结果及一些服务器相关的优惠活动,信息均摘自网络或来自服务商主动提供;所以对本博客提及的内容不作直接、间接、法定、约定的保证,博客内容也不具备任何参考价值及引导作用,访问者需自行甄别。2、访问本博客请务必遵守有关互联网的相关法律、规定与规则;不能利用本博客所提及的内容从事任何违法、违规操作;否则造成的一切后果由访问者自行承担。3、未成年人及不能独立承担法律责任的个人及群体请勿访问本博客。4、一旦您访问本博客,即表示您已经知晓并接受了以上声明通告。
小Z
小Z 关注:0    粉丝:0
【声明】:本站宗旨是为方便站长、科研及外贸人员,请勿用于其它非法用途!站内所有内容及资源,均来自网络。本站自身不提供任何资源的储存及下载,若无意侵犯到您的权利,请及时与我们联系。

发表评论

扫一扫二维码分享