当前位置: 首页 > 编程笔记 >

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

霍建章
2023-03-14
本文向大家介绍js 判断图片是否加载完以及实现图片的预下载,包括了js 判断图片是否加载完以及实现图片的预下载的使用技巧和注意事项,需要的朋友参考一下

创建一个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><pre code_snippet_id="395795" snippet_file_name="blog_20140617_3_4709132" name="code" class="html"><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" /> 
</body> 
</html> 
<script language="JavaScript"> 
document.getElementById("img2").onload = function () { 
alert("图片加载已完成"); 
} 
</script>
 类似资料:
  • 本文向大家介绍JavaScript & jQuery完美判断图片是否加载完毕,包括了JavaScript & jQuery完美判断图片是否加载完毕的使用技巧和注意事项,需要的朋友参考一下 众所周知,常见瀑布流当鼠标滚动到浏览器底部的时候,就会发起一个ajax的请求。在服务端生成item列表后,通过 js append到相应的div里边。 看起来很简单的样子,关键问题就出在图片的加载问题上,图片一般

  • 本文向大家介绍jQuery 判断图片是否加载完成方法汇总,包括了jQuery 判断图片是否加载完成方法汇总的使用技巧和注意事项,需要的朋友参考一下 对于图片的处理,例如幻灯片播放、缩放等,都是依赖于在所有图片完成之后再进行操作。 今天来看下如何判断所有的图片加载完成,而在加载完成之前可以使用 loading 的 gif 图表示正在加载中。 一、普通方法 监听 img 的 load 方法,每 loa

  • 本文向大家介绍javascript图片预加载完整实例,包括了javascript图片预加载完整实例的使用技巧和注意事项,需要的朋友参考一下 本文实例讲述了javascript图片预加载的方法。分享给大家供大家参考,具体如下: 希望本文所述对大家JavaScript程序设计有所帮助。

  • 本文向大家介绍JavaScript判断图片是否已经加载完毕的方法汇总,包括了JavaScript判断图片是否已经加载完毕的方法汇总的使用技巧和注意事项,需要的朋友参考一下 在网上有很多关于判断图片是否已经加载完毕的文章,但是有的浏览器并不适合,下面小编给大家分享一些有关JavaScript判断图片是否已经加载完毕方法汇总,具体内容如下所示: 一.onload事件 通过监听图片的onload事件,可

  • 本文向大家介绍javascript简单实现图片预加载,包括了javascript简单实现图片预加载的使用技巧和注意事项,需要的朋友参考一下 简单的图片预加载 reloader.js 具体用法如上,小伙伴们可以发挥你的想象力,自由扩展。

  • 本文向大家介绍基于javascript实现图片预加载,包括了基于javascript实现图片预加载的使用技巧和注意事项,需要的朋友参考一下 一、定义 预加载图片是提升用户体验的一个好办法,提前加载用户所需的图片,保证图片快速、无缝发布,使用户在浏览器网站时获得更好用户体验。常用于图片画廊等应用中。 [注意]若使用即时加载,加载的图片与页面的其他内容一起加载会增加页面的整体加载时间,所以使用wind