jQuery实用代码片段：图片刷新、加载检测与列表排序

图片刷新与加载检测技巧

（一）如何刷新图片

说明：在请求资源（如网页或图片）时，若资源已被浏览器缓存，请求将返回缓存副本而非更新后的内容。此时，一种常见做法是在请求URL或图片src后附加查询字符串“ran=”加上Math.random()生成的随机数，从而强制浏览器获取最新资源。

代码：

 
$(imageObj).attr('src',$(imageObj).attr('src') + '?' + Math.random());

（二）如何检测图片是否完全加载

说明：在页面未完全加载时执行JavaScript操作可能失败，因为DOM尚未解析完毕。可以在window.onload方法中执行JavaScript或jQuery代码（此时图片肯定已加载，可获取其高度等属性），或者在$(function(){})中执行（此时DOM已解析，但请求的资源未必全部加载完成）。

如果在使用图片之前需要检测其是否加载完成，可采用如下代码：

代码：

 
var imgsrc = "img/img.png";
$(imageObj).load(function()
{ 
alert('图片加载完成');
}).error(function()
{ 
alert('图片加载出错');
}).attr('src',imgsrc);

（三）如何检测多张图片是否完全加载

说明：如上所述，如果页面需要加载十张图片，可以设置一个变量记录已加载的图片数量，当该变量等于总图片数时，表示加载完成。

 
var totalImages = 10;
var loadedImages = 0;
$('img').load(function()
{ 
++loadedImages; //此处为闭包
if(loadedImages == totalImages)
{ 
alert('所有图片加载完毕！');
} 
}); 

列表排序与交互控制示例

（四）如何对无序列表（ul）进行排序

说明：有时需要对无序列表（ul）进行排序（当然也可以使用有序列表ol），但ul能提供更多定制功能，且支持自定义排序器。

代码：（1）待排序列表为：

 
<ul class='to_order'>
<li>cloud</li>
<li>sun</li>
<li>rain</li>
<li>snow</li>
</ul>

（2）jQuery代码为：

 
var items = $('.to_order li').get(); //获取所有待排序li
items.sort(function(a,b) //调用javascript内置函数sort，参数为一闭包函数，也就是排序器
{ 
var keyA = $(a).val();
var keyB = $(b).val();
if(keyA < keyB) return -1;
if(keyA > keyB) return 1;
return 0;
}); 
var ul = $('.to_order');
$.each(items,function(i,li) //此时items为排好队的集合
{ 
ul.append(li);
}); 

（五）如何禁止鼠标右键（contextmenu）

说明：有时我们希望用户不能使用鼠标右键，从而避免复制、另存为等行为。

 
$(function(){
$(document).bind('contextmenu',function(e){
return false;
}); 
}); 

（六）如何实现图片淡出(FadeOut)后另一张图片淡入(FadeIn)的效果

说明：是时候展示一些比较酷的效果了，淡入淡出效果可以采用jQuery的FadeIn和FadeOut效果来实现。

 
$('img').fadeOut(function(){
$(this).load(function(){
$(this).fadeIn();
}).attr('src',AnotherSource);
}); 

DOM存在性检测与淡入淡出效果

（七）如何检测DOM对象是否存在

说明：在对DOM对象操作前，先检测其是否存在。

 
//方法一
if($('#elementId').length)
{ 
//存在
} 
//方法二
if($('#elementId').size() > 0)
{ 
//存在
} 
//方法三
if($('#elementId')[0])
{ 
//存在
} 
//方法四~方法N
期待大家补充，哈哈！