注册 登录  
 加关注
   显示下一条  |  关闭
温馨提示!由于新浪微博认证机制调整,您的新浪微博帐号绑定已过期,请重新绑定!立即重新绑定新浪微博》  |  关闭

红尘若梦

生活的色彩

 
 
 

日志

 
 

JS针对图片加载事件的一些处理函数  

2015-08-25 18:20:46|  分类: 技术 |  标签: |举报 |字号 订阅

  下载LOFTER 我的照片书  |
在一些页面中,为了增加用户的友好度,会预先加载图片,又或者为了让用户不因图片加载过慢,而给予一个提示。当然在图片尺寸很小的时候,这个预加载不是必须,但是针对移动网络,这个JS预加载就非常有必要,而且在图片加载没有完成之前显示一个LOADING……信息,也很有必要。
对于浏览器载入图像来说,只有在对图像发送一个 HTTP请求之后,它们才会被浏览器载入,要么使用 <img> 标记,要么通过JS方法调用实现。而预载入图像最简单的方法是在 JavaScript 中实例化一个新 Image() 对象,然后将需要载入的图像的 URL 作为参数传入。基于 javascript 这种解释性语言的特性, 脚本的执行顺序的确会影响到类似于onload 等事件的追加,所以在追加事件的时候一定要注意把事件追加在触发该事件的句柄之前。
相关JS代码如下:

//自定义函数加载图片完成判断
function loadImage(url){
var o= new Image();
o.src = url;
if(o.complete){
window.alert('图片加载完成:' url); //加载成功,此处可改换成自定义函数,但请注意,相关函数定义一定要放在此函数之前
}else{
o.onload = function(){
window.alert('图片加载完成:' url); //加载成功,兼容其它浏览器
};
o.onerror = function(){
window.alert('图片加载失败:' url); //加载失败
};
}
}
//jquery实现:
$("#MyImg").load(function(){
window.alert('图片加载完成:' url); //图片ID为MyImg,加载成功,此处可改换成自定义函数,但请注意,相关函数定义一定要放在此函数之前
})
//预加载图片函数
function loadImages(sources, callback) {
var count = 0,
images = {},
imgNum = 0;
for (src in sources) {
imgNum++;
}
for (src in sources) {
images[src] = new Image();
images[src].onload = function() {
if (++count >= imgNum) {
callback(images);
}
}
images[src].src = sources[src];
}
}
loadImages(['http://593668.com/file/upload/201508/19/09-32-47-68-1.jpg','http://593668.com/file/upload/201506/23/08-45-01-71-1.jpg','http://593668.com/file/upload/201508/21/10-52-03-89-1.jpg‘],
function() {
window.alert('图片加载完成:'); //预加载完成后执行函数
});

即可以针对单个图片预加载,也可以针对多个图片,灵活运用以上代码,可以完成很多效果。
  评论这张
 
阅读(50)| 评论(0)
推荐 转载

历史上的今天

在LOFTER的更多文章

评论

<#--最新日志,群博日志--> <#--推荐日志--> <#--引用记录--> <#--博主推荐--> <#--随机阅读--> <#--首页推荐--> <#--历史上的今天--> <#--被推荐日志--> <#--上一篇,下一篇--> <#-- 热度 --> <#-- 网易新闻广告 --> <#--右边模块结构--> <#--评论模块结构--> <#--引用模块结构--> <#--博主发起的投票-->
 
 
 
 
 
 
 
 
 
 
 
 
 
 

页脚

网易公司版权所有 ©1997-2017