剑锋博客

今早开通了腾讯微博，发现集成在QQ面板中的微博，居然用上了跟Google Reader一样的随滚动条滚动加载效果。加上近期在做人物辞条时，一些人物的资料超级长，导致页面加载缓慢，也许也是一种不错的解决方法。

Google阅读器上 有一个AJAX效果很不错，就是阅读项目时不需要翻页，浏览器滚动条往下拉到一定位置时自动加载新的一批项目进来，一直到所有项目加载完为止。对于我来说 再好不过了，因为我很不喜欢翻页，尤其是输入页码再定位到页。要知道，数据量增加很频繁时，要通过定位页码来找到目标数据似乎并没有什么意义。我觉得用户 体验成熟的WEB应用程序应当引导用户使用TAG或搜索等功能来找到目标数据。至于浏览数据，尤其是浏览最新的数据，利用浏览器滚动条来加载，是很好的尝试……

我试着用jquery来实现这个功能。先要得到滚动条的总长属性值：scrollHeight，还有滚动条当前位置属性 值：scrollTop。然后通过计算，若当前值位于总长值三分之二时加载新数据。假设DOM上有一个元素为<div id=”mypage”></div>，该元素overflow样式为scroll，也就是元素中的内容溢出元素指定高度时启用滚动 条。利用jquery的load方法为元素加载一个已经存在的文件，我假设它是table.html。这个文件的内容可以是足以使浏览器滚屏的一张数据表。

网页太长，一般需要设置页内锚点，方便阅读。最原始的锚点是跳跃式的，速度太快，有时反而不友好。运用JavaScript，可以做出更友好、更让人喜欢用的锚点跳转效果。

"Page Scroll" 指的是整個網頁長度的滾動, 方法有 html, javascript, jQuery.

1. 首先說到 html 的方式, 它是頁面滾動的老祖宗, 所有的後續程序開發都是以它為基礎.
說它是 "滾動", 還不如說是 "跳躍", 因為它只在錨點 (Anchor) 之間跳躍.
做法: 在頁首定位點的標簽上標明 id="top", 然後在頁腳放個 <a href="#top">goTop</a> 這就完成了.
當鼠標點擊 goTop, 頁面就會直接跳到 #top 的位置.
當然你也可以隨意多放幾個 id 和 # 鏈接, 做較多的跳躍.

2. 拜完了老祖宗, 現在進入正題, 其實 javacript 才是滾動的好手.
scrollTo() 可把内容滾動到指定的座標. 語法是 scrollTo(x,y);
左右移動用得少, 所以 x 可以直接等於 0, 我們主要是用到 y.
全部頁面的總高度: pageY=document.body.offsetHeight;
跳到頁腳是: self.scrollTo(0, pageY);
跳到頁首當然就是: self.scrollTo(0, 0);
跳到某個 id, 要先將 id 轉為座標: idY=document.getElementById('id').offsetTop; self.scrollTo(0, idY);
其中的 self = window = 當前窗口
如果有框架, 還可以用:
frame[i] = self.frame[i] = 當前窗口的框架
parent = self.parent = 當前窗口的父窗口
top = self.top = 當前窗口的頂層窗口
但別急, 現在只是和 html 的效果一模一樣, 是用跳的.
如果把 y 值設入變量, 就可以滾動了:
滾到頁腳是: for (i=0; i<=document.body.offsetHeight; i+=10) { self.scrollTo(0, i) }
滾到頁首是: for (i=document.body.offsetHeight; i>=0; i-=10) { self.scrollTo(0, i) }
滾到某個 id 就要多一個判斷, 要向上還是向下, 主要用當前座標和目標座標的差值, 這可以留給你當練習.
這樣的滾動已經相當順暢了, 但有個缺點: Chrome 是用跳的不是用滾的.
天啊! 如果 Chrome 能支援, 我們就可不用 jQuery 了.

3. jQuery 有自己的程式庫, 運行 Scroll 是輕而易舉.
jQuery(document).ready(function($) {
$body = (window.opera) ? (document.compatMode == "CSS1Compat" ? $('html') : $('body')) : $('html,body'); // opera fix
});
上面這行是 Opera 的補丁, 少了它 Opera 是直接用跳的而且畫面閃爍.
我知道有很多人教你用 $('body') 或是 $('html') 或是 $('html,body'), 但上面那一行補丁可以通殺.
滾到頁腳是: $body.animate({scrollTop: $('#bottom').offset().top}, 1000);
滾到頁首是: $body.animate({scrollTop: $('#top').offset().top}, 1000);
有沒發現都是直接抓 id, 所以滾到某個 id 就不用計算座標了, 這是 jQuery 一大優勢, 難怪 jQuery 會這麼流行.
專心看你會發現, 這動作和上一個 javascript 的效果一模一樣啊!
沒錯, 直線速度沒什麼不同, 如果只須要滾到 #top 或 #bottom 反而用 javascript 會簡單些.
如果還嫌效果不好, 網路上有很多 jQuery 插件是改善 Scroll 效果的, 你也可以下載來試試.
最後發現有個缺點不能不說, Chrome 對座標計算還有誤差...

4. 我發現有個變速的 javascript 值得推荐.
我的主題從 A8 - A9 都是用這個 js, 我主題右邊小三角就是了.
作者: Marco Rosella URI: http://lab.centralscrutinizer.it/the-tiny-scrollings/
它主要是使用減速效果, 越接近目標速度越慢, 就像車子慢慢減速再停止, 這看起來很舒服.
感覺效果比 jQuery 好, 未壓縮 js 才 3.04k, 比 jQuery 小太多了.

上面所有的 Scroll 示例在此, 可將 html copy 回去玩玩.
注意示例要用 jQ 1.2.x 才行, 因為我是用 input 直接叫取 jQ, 所以 1.3+ 不適用.

资料来源：http://kan.willin.org/?p=1311

在开发人物词条的时候，碰到这个问题。某些领导，因为活动众多，介绍相应也多，一个页面将加载很多图片。这样一来，导致整个页面加载很慢。

有什么方法可以避免加载慢呢？

JQuery为我们提供了两种方案：预加载和惰性加载。

预加载：JQuery应用：图片依次加载代码。

$(window).bind('load', function() {
    var preload = new Array();
    $(".hover").each(function() {
        s = $(this).attr("src").replace(/\.(.+)$/i, "_on.$1");
        preload.push(s)
    });
    var img = document.createElement('img');
    $(img).bind('load', function() {
        if(preload[0]) {
            this.src = preload.shift();
        }
    }).trigger('load');
});

惰性加载：JQuery插件：LazyLoad，插件使用方式：

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

调用：

$("img").lazyload();

两种相反的处理思想，孰优孰劣，看具体需要吧。