本貼純屬借鑒大神之作，請各位勿噴，嘿嘿

首先調用jQuery庫文件，還有jquery.scrollLoading.js，您可以直接在頁面的某處添上如下的代碼：

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
<script type="text/javascript" src="http://www.zhangxinxu.com/study/js/mini/jquery.scrollLoading-min.js"></script>

此插件的方法名就是scrollLoading，所以，直接：包裝器.scrollLoading();就可以實現滾動加載效果了，如下：

$(".scrollLoading").scrollLoading();

data-url表示將要異步加載的圖片，src表示首先加載的圖片（一般會是小圖片，或者是一個動畫，網頁中全部的src鏈接同一個圖片，這樣網頁就加載快好多，這個時候再異步的加載要加載的圖片，也就現在要說的功能）

html代碼如下：

![](/Images/120.gif)

js部分代碼如下：

    $(document).ready(function () {
            //實現圖片慢慢浮現出來的效果
            $("img").load(function () {
                //圖片默認隱藏  
                $(this).hide();
                //使用fadeIn特效  
                $(this).fadeIn("5000");
            });
            // 異步加載圖片，實現逐屏加載圖片
            $(".scrollLoading").scrollLoading(); 
    });

想讓頁面更流暢就在此基礎上加上緩存或者保存圖片到本地.

<a >想看大神原帖，請點我</a>