<!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>