简体中文(ZH-CN) English(EN) 繁体中文(ZH-TW) 日本語(JA) 한국어(KO) Melayu(MS) Français(FR) Deutsch(DE)
首页 > web前端 > js教程 > 正文

js 判断图片是否加载完以及实现图片的预下载_javascript技巧

WBOY
发布： 2016-05-16 16:39:28
原创
1988 人浏览过

创建一个Image对象，实现图片的预下载，如果图片已经存在于浏览器缓存，直接调用回调函数，使用onload事件可以判断图片是否加载完成

function loadImage(url, callback) { 
var img = new Image(); //创建一个Image对象，实现图片的预下载 
img.src = url; 

if(img.complete) { // 如果图片已经存在于浏览器缓存，直接调用回调函数 
callback.call(img); 
return; // 直接返回，不用再处理onload事件 
} 
img.onload = function () { //图片下载完毕时异步调用callback函数。 
callback.call(img);//将回调函数的this替换为Image对象 
}; 
};
登录后复制
登录后复制
<pre name="code" class="html"><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 
<html> 
<head> 
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> 
<title>判断图片是否加载完成</title> 

</head> 
<body> 
<img  id="img2" src="images/1.jpg" / alt="js 判断图片是否加载完以及实现图片的预下载_javascript技巧" > 
</body> 
</html> 
<script language="JavaScript"> 
document.getElementById("img2").onload = function () { 
alert("图片加载已完成"); 
} 
</script>
登录后复制
相关标签：
加载 图片 预下载
来源：php.cn
上一篇：Node.js模块加载详解_node.js 下一篇：JS遍历Json字符串中键值对先转成JSON对象再遍历_javascript技巧
本站声明
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系admin@php.cn
作者最新文章
最新问题
关于CSS思维导图的课件在哪？ 课件
来自于 2024-04-16 10:10:18
0
0
1335
匹配单词的正则表达式 我有一个脚本，我试图将新的职位名称与数据库中的现有职位名称进行匹配。SELECTa.titleASJobTitle,j.DescriptionASMatchedJobTitle,f...
来自于 2024-04-06 21:24:04
0
1
606
动态修改Javafx中的内联CSS样式 我试图在应用程序最大化时更改窗格的背景图像。我的背景是使用内嵌css设置的。我为样式设置了两个不同的变量和一个if语句。但是，我没有运气让它改变样式。StringcssStyle=...
来自于 2024-04-06 20:57:16
0
1
487
使用网格创建此特定设计：分步指南 我正在尝试创建一个类似于此图像的布局，我尝试过使用此网格但无法实现。<ulclass="container"><liclass="f...
来自于 2024-04-06 20:29:08
0
2
492
在移动视图中，当用户点击链接时，如何关闭此导航栏？ 当用户点击链接浏览网站时，导航栏没有关闭？我曾尝试向每个链接添加单击事件侦听器以关闭导航栏，但它不起作用！此外，处于活动位置（即X）的hamberberger菜单图标也没有很好地对...
来自于 2024-04-06 19:23:03
0
1
411
相关专题
更多>
热门推荐
热门教程
更多>
相关教程
热门推荐
最新课程
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责声明 Sitemap
PHP中文网：公益在线PHP培训，帮助PHP学习者快速成长！