您的位置:首页 > 教程笔记 > 前端笔记

js如何判断<img>图片是否加载完毕

2023-12-04 13:48:48 前端笔记 78

图片的应用大家自然就不用说了,如果一个网站没有图片,实在想象不出这样的网站是什么样子。

我们经常需要当图片完全加载完毕再去执行相应的操作。

所以就需要判断图片是否已经加载完毕,下面就介绍一下如何实现此功能,需要的朋友可以做一下参考。

使用onload事件:

使用此事件可以判断<img>图片是否加载完成。

看代码实例:

<img id="antzone" src="softwhy.jpg" />
<script type="text/javascript">
document.getElementById("antzone").onload=function(){
  alert("图片加载已完成");
}

上面的代码实现了判断功能,但是有一个不算缺点的缺点(其实推荐如此使用),js代码只能够放在<img>标签的后面。

当然onload事件可以写在标签之内,代码:

function get(ts){
  ts.style.display = 'block';//显示图片
}
</script>
<img class="antzone" onload="get(this)"  src="softwhy.jpg" style='display:none'/>

相关推荐

  • js获取伪元素选择器规定的内容代码实例

    js获取伪元素选择器规定的内容代码实例

    关于伪元素选择器可以参阅CSS bfor/::bfor一章节。下面介绍一下如何利用js获取伪元素选择器定义的内容,这种需求在以前可能比较少。但是随着浏览器的进步,伪元素选择器的实用会越来越广

    前端笔记 2023-12-04 13:48:39 195
  • PHP+jQuery+Ajax实现多图片上传介绍

    PHP+jQuery+Ajax实现多图片上传介绍

    本文中用到一个jx表单提交插件:jqry.form.js,有高人修改了几行代码并改名为:jqury.wllform.js,直接拿来用。下面就来就来介绍一下这一款功能强大的插件的使用,需要的朋

    前端笔记 2023-12-04 13:48:35 216
  • 通过鼠标拖动选取指定数字代码实例

    通过鼠标拖动选取指定数字代码实例

    在不少的应用中,选取数字的时候可以通过鼠标拖动来实现,这样的效果人性化的很。下面就分享一个插件实现了这样的功能,这就是jRng,它是利用jQury实现的。一.HTML代码部分:首先载入jQur

    前端笔记 2023-12-04 13:48:32 162
  • js实现的获取选中文本代码实例

    js实现的获取选中文本代码实例

    本章节介绍一下如何或者被选中的文本内容。非常的简单,需要的朋友可以做一下参考,代码实例如下:

    前端笔记 2023-12-04 13:48:31 105
  • nodeJS代码实现计算交社保代码实例

    nodeJS代码实现计算交社保代码实例

    下面是一段比较实用的代码实例,是关于交社保的计算。代码实例如下:fuckShbo: function (rq, rs, nxt) { //每个月1800的社保 vr dy = (18

    前端笔记 2023-12-04 13:48:26 119