<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>jquery 图片加载插件 </title>
<script type="text/javascript" src="jquery-1.4.2.min.js"></script>
<style type="text/css">
*{ padding:0; margin:0}
html,body{height: 10%;height: 100%;}
body{position: relative;}
</style>
</head>
<body>
<div class="wrap">
<img src="images/loading.gif" width=270 height="130" data="http://www.mizone.cc/images/pic_love_on.jpg">
<img src="images/loading.gif" width=270 height="130" data="http://www.mizone.cc/images/banner_dl_20130304_on.jpg">
</div>
<div class="wrap_2">
<img src="images/loading.gif" width=270 height="130" data="http://www.mizone.cc/images/pic_love_on.jpg">
<img src="images/loading.gif" width=270 height="130" data="http://www.mizone.cc/images/banner_dl_20130304_on.jpg">
</div>
<div class="bg"></div>
<script type="text/javascript">
/*2013 7 -20
enen
当图片还没有加载完时。首先出现一个loading的图片;
真正的图片路径写在了data属性里
*/
(function($){
$.loadImg = function(options){//图片加载插件
var configs = $.extend($.loadImg.defaults,options);
$(window).bind("load",function(){
for(var i = 0; i < configs.eleArr.length;i++){
$(configs.eleArr[i]).find("img").each(function(){
var src = $(this).attr("data");
$(this).attr({src:src});
});
}
});
};
$.loadImg.defaults = {
dataSrc : "data",
eleArr : [] //要加载的图片的父层数组
}
})(jQuery);
$.loadImg({eleArr:[".wrap",".wrap_2"]});
</script>
</body>
</html>