jquery 圖片延遲加載插件制作tab選項卡圖片異步加載



124 493 165



特效描述:圖片延遲加載 延遲加載插件 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

加群請備注:從官網了解到

老夫子电子