Javascript, 網頁設計

jQeury外掛「Infinite Scroll」滾動無限載入網頁內容

梅干 2015/09/22
梅問題-jQeury外掛「Infinite Scroll」滾動無限載入網頁內容
  前陣子有不少網站吹起了瀑布流版型,讓網頁看起來相當的豐富,且排序再不用擔心區塊長短腳的問題,同時當向下滾動頁面時,到底部就會不斷的載入,除了用於分頁外,也可將這自動載入用在一般的單一頁面說,比方說有二篇關聯式文章時,就可透過此方式,將可相似的文章給載入進來,就有點像是延伸文章的概念,其實這只要引用jQuery的Infinite Scroll套件,立即就可做到,甚至還可變換網址,這樣才有助於SEO的優化,至於這隻外掛要怎麼作呢?方法很簡單,現在就一塊來看看吧!

Infinite Scroll:
外掛名稱:Infinite Scroll
外掛版本:1.5.100504
外掛網址:http://www.infinite-scroll.com/infinite-scroll-jquery-plugin/

Step1
進入外掛網站,點下方的連結,進入下載畫面。
梅問題-jQeury外掛「Infinite Scroll」滾動無限載入網頁內容
Step2
點右下Download ZIP就可下載全部的範例,但一般只需下載jquery.infinitescrollaq.jsjquery.infinitescroll.min.js(min為壓縮過的js)。
梅問題-jQeury外掛「Infinite Scroll」滾動無限載入網頁內容
Step3
下載完畢後,分別將jQuery.js與剛所下載的jquery.infinitescrollaq.js放在你的專案下,並將它們引用到網頁中。
<script src="jquery-1.6.1.js"></script>
<script src="jquery.infinitescroll.js"></script>

Step4
基本HTML網頁結構。
<div id="content">
內容區塊
</div>
........
<a id="next" href="index2.html">next page</a><!-- 放在最底部 --> 

Step4
接著分別只要設定載入的區塊名稱(itemSelector),以及下一頁籤(navSelector),以及格式(dataType),這樣就大功告成啦!而官網中有詳盡的設定屬性,如有需可至官網中查看,其本上只要以下這些就可正常的使用啦!
<script>
		$('#content').infinitescroll('binding','unbind');
		$('#content').data('infinitescroll', null);
		$(window).unbind('.infscr');
		
		$('#content').infinitescroll({
		navSelector : "#next:last",
		nextSelector : "a#next:last",
		itemSelector : "#content",
		dataType : 'html'
		});

		//網址切換
		$(function () {
		    var cont_h = $('.main').height();
		    var pathname = window.location.href;
		    var pathhost  = location.hostname;
	   
	    $(document).scroll(function () {
	          var top = window.pageYOffset;
	          	if(top<cont_h){
	          		window.history.pushState('', '', pathname);
	          		
	          	}else{
	          		var nexturl = $('#next').attr("href").replace("http://","").replace(pathhost,"");
	          		window.history.pushState('', '', nexturl);
	          	}
	    	});
		});
	</script>

Step5
立馬來預覽一下,這時看到紅色框框表示為動態載入的第二頁,同時上方的網址也會更著改變。
梅問題-jQeury外掛「Infinite Scroll」滾動無限載入網頁內容
Step6
當要載入多個標籤id時,可在itemSelector :用,來作加選,比方要動態載入二個div,就可div1,div2這樣就可載入二個不同的div區塊,是不是超ez的呀!由於這使用ajax的技術,因此當要預覽結果時,需放在webserver上才能預覽喔!當了解了它的用法後,就可任意的應用各平台下,無論是Wordpress、Opencart、Joomla...皆可,因此有需要的朋友,不妨也可參考看看囉!
梅問題-jQeury外掛「Infinite Scroll」滾動無限載入網頁內容
[範例預覽] [範例下載]