图片预加载、占位背景图jquery plugin

预加载图片的插件

/*
 * jQuery Rawr Sliding Container (RSC) v1.0 
 * Website: http://hungred.com
 * Demo Site: http://hungred.com/wp-content/demo/RSC/demo-RSC.html
 * Description: A simple sliding container that can be useful for you.
 * Contact: [email protected]
 * version 1.0
 * 
 * TERMS OF USE -  Rawr Sliding Container (RSC)
 * Open source under the MIT License. 
 * Copyright (c) 2009 Clay Lua Czee Yong
 * 
 * Permission is hereby granted, free of charge, to any person
 * obtaining a copy of this software and associated documentation
 * files (the "Software"), to deal in the Software without
 * restriction, including without limitation the rights to use,
 * copy, modify, merge, publish, distribute, sublicense, and/or sell
 * copies of the Software, and to permit persons to whom the
 * Software is furnished to do so, subject to the following
 * conditions:
 * 
 * The above copyright notice and this permission notice shall be
 * included in all copies or substantial portions of the Software.
 * 
 * THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
 * EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES
 * OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
 * NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT
 * HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY,
 * WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING
 * FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR
 * OTHER DEALINGS IN THE SOFTWARE.
 *  
 *
*/
(function($){
 $.fn.RSC= function(options) {

  var defaults = {
	prevImageID: "#prev",
	nextImageID: "#next",
	noOfContainer: 6,
	containerW: 500,
	duration: 1000
  };
  var op = $.extend(defaults, options);
  var pathObj = $('#container').children();
  var i = 0;
  
	function loadImg(url, obj, loading, msg)
	{
		$(loading).css({"display":"block"}).animate({opacity:1},1000);					//display the loading in progress image
		$(obj).html("<img src='"+url+"' width='500px' height='350px'/>").css({opacity: 0});	//throw in the image into the div block
		var tmp = $(obj).children();													//gets the image obj we just thrown in
			tmp[0].onload = function(){													//when the image has complete loaded
				$(obj).animate({opacity:1},1000);										//display the image
				$(loading).animate({opacity:0},1000).css({"display":"none"});				//hide the loading in progress image
			}
			tmp[0].onerror = function(){												//when the image fail to load for various reason
				$(this).css({"display":"none"});											//we hide the image that fail
				$(obj).html($(obj).html()+"<div>"+msg+"</div>").animate({opacity:1},1000);//provides a message to the user instead
				$(loading).animate({opacity:0},1000).css({"display":"none"});				//hide the loading in progress image
			}
	}
	function getImg(obj)
	{
		url = $(obj).css({"display":"block", "visibility":"visible"}).html();			//get the image url from the div block
		loaded = false;										//check whether image has been loaded
		if(url.search(/<.*/) != -1)							//search for opening tag, doing /'<img.*/>'/ doesn't work in IE7 and Opera somehow.
		{
			loaded=true;									//found opening tag, assume its loaded
			tmp = $(obj).children();						//get the img tag obj
			url = $(tmp[0]).attr("src");						//retrieve the url
			if(tmp[1] != undefined)							//check whether there is a second block in the children of the div block (this is added in loadImg when it fail)
				loaded = false;								//there is an error message, we try to load again
		}
		if(!loaded)
			loadImg(url,obj, "#loading", "there seems to be an issue, try again later");
	}
	getImg(pathObj[0]);
  return this.each(function() {
		
		$(this).click(function()
		{
			if(this.id==op.prevImageID.replace("#",""))
			{
				i++;
				if(i > 0)
				i=(0-(op.noOfContainer-1))
			}
			else if(this.id==op.nextImageID.replace("#",""))
			{
				i--;
				if(i<(0-(op.noOfContainer-1)))
				i=0;
			}
			$("div#container").animate({marginLeft: i*op.containerW+"px"},op.duration, function(){
			var imgObj = getImg(pathObj[0-i]);
			});
			
		});	
  });
 };
})(jQuery);

demo:https://hungred.com/wp-content/demo/jQuery-preloading-with-image/demo.html

图片占位、背景图的plugin
http://holderjs.com/