JS判断图片加载完成方法

简介: javascipt原生方法选取指定ID的图片,通过onload指定回调方法,在图片加载完成后弹出“图片加载已完成”字样提示。 document.getElementById("pic1").onload = function () { alert("图片加载已完成"); }优点:简单易用,不影响HTML代码。

javascipt原生方法

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

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

<script language="JavaScript">
    document.getElementById("pic1").onload = function () {
        alert("图片加载已完成");
    }
</script>

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

缺点:只能指定一个元素,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代码,或者需要代码精简的情况下不适用

 

相关文章
|
6天前
|
JavaScript 前端开发
js遍历对象的方法
js遍历对象的方法
13 1
|
19天前
|
JavaScript 前端开发
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
Google Earth Engine(GEE)扩展——ee-polyfill JavaScript 方法 (ES6+)
10 1
|
26天前
|
JavaScript 前端开发
获取JavaScript时间戳函数的5种方法
获取JavaScript时间戳函数的5种方法
18 0
|
26天前
|
JavaScript 前端开发
js数字(Number)方法汇总
js数字(Number)方法汇总
11 0
|
26天前
|
存储 JavaScript 前端开发
|
22天前
|
JavaScript 前端开发
【JavaScript精通之道】掌握数据遍历:解锁现代化遍历方法,提升开发效率!
在JavaScript开发中,经常需要对数组、对象等数据结构进行遍历操作。为了提高开发效率,JavaScript提供了多种灵活的遍历方法。本文将介绍JavaScript中常用的数据结构遍历方法,助你更好地操作数据。
|
26天前
|
JavaScript 前端开发 索引
js遍历数组和对象的常用方法有哪些?
js遍历数组和对象的常用方法有哪些?
11 0
|
26天前
|
JavaScript
js中有关字符串的方法
js中有关字符串的方法
7 0
|
28天前
|
前端开发 JavaScript 开发者
JavaScript 中的异步编程方法及应用
在传统的 JavaScript 开发中,对于异步操作的处理一直是一个挑战。本文将介绍 JavaScript 中常用的异步编程方法,包括回调函数、Promise 对象、async/await 等,并结合实际案例展示它们的应用,帮助开发者更好地理解和应用异步编程技术。
7 0
|
1月前
|
前端开发 JavaScript 算法
深入探究 JavaScript 中的 String:常用方法和属性全解析(下)
深入探究 JavaScript 中的 String:常用方法和属性全解析(下)

相关产品

  • 云迁移中心