jquery 图片延迟加载插件制作tab选项卡图片异步加载



117 464 155



特效描述:图片延迟加载 延迟加载插件 tab选项卡 图片异步加载,jquery 图片延迟加载插件与tab选项卡结合实现选项卡区域模块图片异步加载,优化浏览器页面图片延迟加载,提高浏览器的页面打开速度。

代码结构

1. 引入JS

<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery.lazyload.js"></script>

2. HTML代码

	<div class="demopage">
		<div class="tabbox" id="statetab">
			<ul class="tabbtn">
				<li id="two1" onmouseover="setContentTab('two',1,4)" class="current"><a href="http://www.17sucai.com/">jquery 特效</a></li>
				<li id="two2" onmouseover="setContentTab('two',2,4)"><a href="http://www.17sucai.com/">javascript 特效</a></li>
				<li id="two3" onmouseover="setContentTab('two',3,4)"><a href="http://www.17sucai.com/">div+css 教程</a></li>
				<li id="two4" onmouseover="setContentTab('two',4,4)"><a href="http://www.17sucai.com/">HTML5 特效</a></li>
			</ul><!--tabbtn end-->
			<div class="tabcon" id="con_two_1">
				<a target="_blank" href="http://www.17sucai.com/" title="jquery 图片特效插件 异步读取图片TOP排行榜特效"><img height="150" width="150" alt="jquery 图片特效插件 异步读取图片TOP排行榜特效" original="images/smalldb89cf912e07ed70f0c933c33e0cb976.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器"><img height="150" width="150" alt="jquery 弹出层 点击按钮弹出层兼容IE和firefox浏览器" original="images/small28ee23b309f1dfec23e0488f9a4cffa6.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单"><img height="150" width="150" alt="jquery 导航插件 一个动画导航下拉菜单Apycom软件的Java下拉菜单" original="images/smallf988082285f9108d3b65b41c03bad4a4.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换"><img height="150" width="150" alt="jquery soChange 切换插件 支持焦点图片切换 选项卡切换 带按钮与分页索引按钮切换" original="images/small7ec25ef488c710d8d8ac3e5a33d6034b.jpg"></a>
			</div><!--tabcon end-->
			<div class="tabcon" id="con_two_2" style="display:none;">
				<a target="_blank" href="http://www.17sucai.com/" title="js 提示框插件鼠标滑过提示文章内容信息"><img height="150" width="150" alt="js 提示框插件鼠标滑过提示文章内容信息" original="images/small20b40d215786e2946c825ad3fc8dcef8.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title=" javascript滚动图片带按钮控制上下左右自动无缝滚动"><img height="150" width="150" alt=" javascript滚动图片带按钮控制上下左右自动无缝滚动" original="images/small5cad424bb2358cf602f6ecd991bf0870.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="js多功能选项卡插件 选项卡自动切换内容图片延迟加载"><img height="150" width="150" alt="js多功能选项卡插件 选项卡自动切换内容图片延迟加载" original="images/small546ee4ae135fdeec7f6b0eb9a16b3440.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动"><img height="150" width="150" alt="javascript图片特效 网站banner制作焦点图片切换带按钮和固定图标控制图片左右滚动" original="images/small359cba92eacf5bdd69ffd2f52ca60b00.jpg"></a>
			</div><!--tabcon end-->
			<div class="tabcon" id="con_two_3" style="display:none;">
				<a target="_blank" href="http://www.17sucai.com/" title="div+css制作非常实用的24款分页页码css代码"><img height="150" width="150" alt="div+css制作非常实用的24款分页页码css代码" original="images/smallf1179c13ff068ff4b102b2b97852e960.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="用div+css3美化制作动画导航特效鼠标滑过动画显示"><img height="150" width="150" alt="用div+css3美化制作动画导航特效鼠标滑过动画显示" original="images/smallb2ba4acf8f3e9d14572fa502fe1dadf0.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox"><img height="150" width="150" alt="用div+css制作纯CSS下拉菜单,兼容IE6 IE7 IE8及以上 Firefox" original="images/smallee9241175b1e38b5df271a9f2f67034d.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="用div+css制作一个CSS3的简约图标导航菜单"><img height="150" width="150" alt="用div+css制作一个CSS3的简约图标导航菜单" original="images/smallc5d3ea1b5b05a76711a797134d65dbfd.jpg"></a>
			</div><!--tabcon end-->
			<div class="tabcon" id="con_two_4" style="display:none;">
				<a target="_blank" href="http://www.17sucai.com/" title="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果"><img height="150" width="150" alt="jquery HTML5 幻灯片插件 用 Canvas 制作类似百叶窗拍摄快门摄影拍摄效果" original="images/small8937f779ac932d157fe04fe463b083d4.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="制作CSS3和HTML5的一个单页网站模板"><img height="150" width="150" alt="制作CSS3和HTML5的一个单页网站模板" original="images/small9727df127970a3483f5bb363707d0027.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="jquery 幻灯片切换应用一个HTML5的幻灯片"><img height="150" width="150" alt="jquery 幻灯片切换应用一个HTML5的幻灯片" original="images/small5be1afce8d42e773d6eceba386d7189e.jpg"></a>
				<a target="_blank" href="http://www.17sucai.com/" title="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3"><img height="150" width="150" alt="jquery 图片滚动特效应用旋转幻灯片使用jQuery和CSS3" original="images/small6b87a0e9c81c16b2cd43bc4a2879c2d0.jpg"></a>
			</div><!--tabcon end-->
		</div><!--tabbox end-->
	</div><!--demopage end-->



用户评论
大牛,别默默的看了,快登录帮我点评一下吧!:)      登录 | 注册


热门标签: 滚动切换 滚动条切换 滑动选项卡 滑动切换 选项卡切换 选项卡 切换 tab切换 页面切换 选项卡插件 切换插件 滑动手风琴 选项卡自动切换

×
×

注册

官方QQ群

扫描上面二维码加微信群

官方QQ群

jQuery/js讨论群
群号:642649996
Css3+Html5讨论群
群号:322131262

加群请备注:从官网了解到