jQuery图片预加载代码

版权：原创更新时间：1年以上

[该文章底部包含文件资源,可根据自己情况,决定是否下载资源使用,时间>金钱,如有需要,立即查看资源]

以下是 jQuery图片预加载代码的示例演示效果:

当前平台(PC电脑)

平台:

整屏预览

部分效果截图:

HTML代码(index.html):

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>jQuery图片预加载代码</title>
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">

</head>
<body>
<div class="main"><br>
	<div class="title">图片预加载</div>
	<div class="content">
		<div class="img">
			<a href="">
				<img lazyLoadSrc="images/1.jpg" alt="" width="200" height="120">
			</a>
			<span class="loading" ></span>
		</div>
		<div class="img">
			<a href="">
				<img lazyLoadSrc="images/2.jpg" alt="" width="200" height="120">
			</a>
			<span class="loading" ></span>
		</div>
		<div class="img">
			<a href="">
				<img lazyLoadSrc="images/3.jpg" alt="" width="200" height="120">
			</a>
			<span class="loading" ></span>
		</div>
		<div class="img">
			<a href="">
				<img lazyLoadSrc="images/4.jpg" alt="" width="200" height="120">
			</a>
			<span class="loading" ></span>
		</div>
		<div class="img">
			<a href="">
				<img lazyLoadSrc="images/5.jpg" alt="" width="200" height="120">
			</a>
			<span class="loading" ></span>
		</div>
		<div class="img">
			<a href="">
				<img lazyLoadSrc="images/6.jpg" alt="" width="200" height="120">
			</a>
			<span class="loading" ></span>
		</div>
	</div>
</div>
<script type="text/javascript" src="js/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="js/ydxLazyLoad.js"></script>
<script type="text/javascript">
	$(function(){
		$("[lazyLoadSrc]").YdxLazyLoad({
			onShow: function () {
				$(this).parent().next().hide()
			}
		});
	});
</script>
</body>
</html>

JS代码(ydxLazyLoad.js):

/***图片延迟加载插件* @author ydx * 2015.5.19*/
(function(window,$){
	//图片延迟加载实现函数var YdxLazyLoad = function(window,$){
	//默认参数var defaultOption ={
	threshold:0,//灵敏度 failure_limit:0,event:"scroll resize",//触发事件 effect:"fadeIn",//显示模式，支持jquery所有显示方式 container:window,//容器 effectTime:300,//图片显示时间 callback:null //图片显示后执行的回调函数}
;
	//option参数管理器var optionHandel ={
	//设置参数对象setOption:function(element,opt){
	return element.data("_YdxLazyLoadOption_",opt);
}
,//获取参数对象getOption:function(element){
	return element.data("_YdxLazyLoadOption_");
}
,//删除对象参数removeOption:function(element){
	return element.removeData("_YdxLazyLoadOption_");
}
}
;
	//判断图片元素位置var checkPosition ={
	////判断是否在纵向滚动条之上 above:function(element){
	var fold,$window = $(window),option = optionHandel.getOption(element);
	if (option.container === undefined || option.container === window){
	fold = $window.height() + $window.scrollTop();
}
else{
	fold = $(option.container).offset().top + $(option.container).height();
}
return fold >= $(element).offset().top + option.threshold;
}
,//判断是否在纵向滚动条之下below:function(element){
	var fold,$window = $(window),option = optionHandel.getOption(element);
	if (option.container === undefined || option.container === window){
	fold = $window.height() + $window.scrollTop();
}
else{
	fold = $(option.container).offset().top + $(option.container).height();
}
return fold <= $(element).offset().top - option.threshold;
}
,//判断是否在横向滚动条左侧 left:function(element){
	var fold,$window = $(window),option = optionHandel.getOption(element);
	if (option.container === undefined || option.container === window){
	fold = $window.width() + $window.scrollLeft();
}
else{
	fold = $(option.container).offset().left + $(option.container).width();
}
return fold >= $(element).offset().left + option.threshold;
}
,//判断是否在横向滚动条右侧 right:function(element){
	var fold,$window = $(window),option = optionHandel.getOption(element);
	if (option.container === undefined || option.container === window){
	fold = $window.width() + $window.scrollLeft();
}
else{
	fold = $(option.container).offset().left + $(option.container).width();
}
return fold <= $(element).offset().left - option.threshold;
}
,flag:function(element){
	var option = optionHandel.getOption(element);
	return !$.rightoffold(element,element) && !$.leftofbegin(element,element) && !$.belowthefold(element,element) && !$.abovethetop(element,element);
}
}
;
	function showImg(){
	var $this = $(this),opt = optionHandel.getOption($this);
	if (!opt.isLoad){
	var currentImgSrc = opt.src || $this.attr("lazyLoadSrc");
	$(new Image()).attr("src",currentImgSrc).load([opt,$this],function(e){
	var para = e.data,opt = para[0],element = para[1];
	element.attr("src",currentImgSrc).hide()[opt.effect](opt.effectTime);
	opt.isLoad = true;
	opt.callback && opt.callback.call(element,currentImgSrc);
	$(this).unbind("load");
	opt.onShow && opt.onShow.call(element);
}
);
}
}
//初始化控件function init(){
	//默认有lazyLoadSrc属性的都添加延迟加载$("[lazyLoadSrc]:visible").each(function(i,element){
	add($(element));
}
);
}
/*** 添加延迟加载绑定* @参数 element:被绑定的元素*opt:设置参数*/
function add(element,opt){
	if (optionHandel.getOption(element)){
	return;
}
//element.load([opt],function(e){
	//var opt = e.data[0],//element = $(this);
	//合并参数opt = $.extend(true,{
}
,defaultOption,opt);
	//将参数保存到data中，同时绑定显示图片事件optionHandel.setOption(element,opt).bind("showImg",showImg);
	var $container = $(opt.container),containerData ={
	elementMap:{
}
,num:0}
;
	//初始化容器的存储数据if (!$container.data("_YdxLazyLoad_container_")){
	$container.data("_YdxLazyLoad_container_",containerData);
}
else{
	containerData = $container.data("_YdxLazyLoad_container_");
}
//将元素保存到容器存储数据中opt._index = containerData.num;
	containerData.elementMap[containerData.num++] = element;
	//判断容器是否已绑定事件if (!containerData.isBind || containerData.event !== opt.event){
	$container.bind(opt.event,function(e){
	var data = $(this).data("_YdxLazyLoad_container_"),elementMap = data.elementMap;
	//循环判断元素是否满足显示要求$.each(elementMap,function(key,el){
	if (el.data("_YdxLazyLoadOption_")){
	if (checkPosition.above(el) && checkPosition.left(el)){
	el.trigger("showImg");
	delete elementMap[key];
}
}
else{
	delete elementMap[key];
	el.remove();
}
}
);
	return false;
}
);
	//标识容器已绑定事件containerData.isBind = true;
	containerData.event = opt.event;
}
//手动触发一次绑定事件$.each(opt.event.split(" "),function(i,event){
	if (event === 'scroll'){
	var e = $.Event(event,{
	scrollTop:$('body').scrollTop()}
);
	$container.trigger(e);
	return;
}
$container.trigger(event);
}
);
	//删除load绑定//element.unbind("load");
	//}
)}
/*** 删除延迟加载绑定* @参数 element:被绑定的元素*/
function remove(element){
	var opt = optionHandel.getOption(element);
	//删除对应容器中的映射关系delete $(opt.container).data("_YdxLazyLoad_container_").elementMap[opt._index];
	//删除元素中的_YdxLazyLoadOption_数据optionHandel.removeOption(element);
}
return{
	init:init,add:add,remove:remove}
;
}
(window,$);
	//$.fn.YdxLazyLoad = function(opt){
	return this.each(function(){
	switch($.type(opt)){
	//不传入参数或者为json对象，则进行add操作case "undefined":case "object":YdxLazyLoad.add($(this),opt);
	break;
	//传入参数为string类型，则判断为方法调用case "string":var args = Array.prototype.slice.call(arguments,1);
	args.unshift($(this));
	YdxLazyLoad[opt].call(YdxLazyLoad,args);
	break;
}
}
);
}
;
}
)(window,jQuery)

CSS代码(style.css):

body{background-color:#F4F4F4;font-family:"΢���ź�";}
.main{width:660px;height:360px;margin:100px auto;border:1px solid #ccc;}
.main .title{font-size:24px;text-align:center;}
.main .content{width:100%;height:320px;padding-top:5px;}
.main .img{width:200px;height:120px;float:left;margin:10px;position:relative;}
.loading{width:200px;height:120px;display:inline-block;position:absolute;top:0;left:0;z-index:3;background:#f9f9f9 url("../images/loading24.gif") no-repeat center center;}

附件:下载该文件资源,减少时间成本(增值服务)