jquery 图片加载效果代码

代码二

 
 
 
 
 
 

jquery插件代码

var queryloader = {
 overlay: "",
 loadbar: "",
 preloader: "",
 items: new array(),
 donestatus: 0,
 donenow: 0,
 selectorpreload: "body",
 ieloadfixtime: 2000,
 ietimeout: "",
  
 init: function() {
  if (navigator.useragent.match(/msie (d+(?:.d+)+(?:bd*)?)/) == "msie 6.0,6.0") {
   //break if ie6   
   return false;
  }
  if (queryloader.selectorpreload == "body") {
   queryloader.spawnloader();
   queryloader.getimages(queryloader.selectorpreload);
   queryloader.createpreloading();
  } else {
   $(document).ready(function() {
    queryloader.spawnloader();
    queryloader.getimages(queryloader.selectorpreload);
    queryloader.createpreloading();
   });
  }
  
  //help ie drown if it is trying to die :)
  queryloader.ietimeout = settimeout("queryloader.ieloadfix()", queryloader.ieloadfixtime);
 },
 
 ieloadfix: function() {
  var ie = navigator.useragent.match(/msie (d+(?:.d+)+(?:bd*)?)/);
  if (ie[0].match("msie")) {
   while ((100 / queryloader.donestatus) * queryloader.donenow < 100) {
    queryloader.imgcallback();
   }
  }
 },
 
 imgcallback: function() {
  queryloader.donenow ++;
  queryloader.animateloader();
 },
 
 getimages: function(selector) {
  var everything = $(selector).find("*:not(script)").each(function() {
   var url = "";
   
   if ($(this).css("background-image") != "none") {
    var url = $(this).css("background-image");
   } else if (typeof($(this).attr("src")) != "undefined" && $(this).attr("tagname").tolowercase() == "img") {
    var url = $(this).attr("src");
   }
   
   url = url.replace("url("", "");
   url = url.replace("url(", "");
   url = url.replace("")", "");
   url = url.replace(")", "");
   
   if (url.length > 0) {
    queryloader.items.push(url);
   }
  });
 },
 
 createpreloading: function() {
  queryloader.preloader = $("

").appendto(queryloader.selectorpreload);
  $(queryloader.preloader).css({
   height:  "0px",
   width:  "0px",
   overflow: "hidden"
  });
  
  var length = queryloader.items.length;
  queryloader.donestatus = length;
  
  for (var i = 0; i < length; i++) {
   var imgload = $("");
   $(imgload).attr("src", queryloader.items[i]);
   $(imgload).unbind("load");
   $(imgload).bind("load", function() {
    queryloader.imgcallback();
   });
   $(imgload).appendto($(queryloader.preloader));
  }
 },

 spawnloader: function() {
  if (queryloader.selectorpreload == "body") {
   var height = $(window).height();
   var width = $(window).width();
   var position = "fixed";
  } else {
   var height = $(queryloader.selectorpreload).outerheight();
   var width = $(queryloader.selectorpreload).outerwidth();
   var position = "absolute";
  }
  var left = $(queryloader.selectorpreload).offset()['left'];
  var top = $(queryloader.selectorpreload).offset()['top'];
  
  queryloader.overlay = $("

").appendto($(queryloader.selectorpreload));
  $(queryloader.overlay).addclass("qoverlay");
  $(queryloader.overlay).css({
   position: position,
   top: top,
   left: left,
   width: width + "px",
   height: height + "px"
  });
  
  queryloader.loadbar = $("

").appendto($(queryloader.overlay));
  $(queryloader.loadbar).addclass("qloader");
  
  $(queryloader.loadbar).css({
   position: "relative",
   top: "50%",
   width: "0%"
  });
 },
 
 animateloader: function() {
  var perc = (100 / queryloader.donestatus) * queryloader.donenow;
  if (perc > 99) {
   $(queryloader.loadbar).stop().animate({
    width: perc + "%"
   }, 500, "linear", function() {
    queryloader.doneload();
   });
  } else {
   $(queryloader.loadbar).stop().animate({
    width: perc + "%"
   }, 500, "linear", function() { });
  }
 },
 
 doneload: function() {
  //prevent ie from calling the fix
  cleartimeout(queryloader.ietimeout);
  
  //determine the height of the preloader for the effect
  if (queryloader.selectorpreload == "body") {
   var height = $(window).height();
  } else {
   var height = $(queryloader.selectorpreload).outerheight();
  }
  
  //the end animation, adjust to your likings
  $(queryloader.loadbar).animate({
   height: height + "px",
   top: 0
  }, 500, "linear", function() {
   $(queryloader.overlay).fadeout(800);
   $(queryloader.preloader).remove();
  });
 }
}