最近在纠结公司网站加载速度，用chrome浏览器查看元素，Network显示主要影响加载速度的是几个编辑上传的图片。看了下大网站的做法，打开页面只加载第一屏的图片，当用户移动滚动条看第一屏以下的内容的时候，才加载所需图片。

碰到这样的需求，没办法百度，谷歌都用上。找到了一个牛人写的jquery。这里拿来分享下。博文地址www.zhangxinxu.com，这里提下做前端的话他的博文很值得一看，这里非常感谢他分享的代码。

这是js源码

(function($) {
  $.fn.scrollLoading = function(options) {
        var defaults = {
            attr: "data-url"  //这里是默认的自定义属性
       };
      var params = $.extend({}, defaults, options || {});
     params.cache = [];
      $(this).each(function() {
           var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]);
           if (!url) { return; }
           //重组
            var data = {
                obj: $(this),
               tag: node,
              url: url
            };
          params.cache.push(data);
        });

     //动态显示数据
        var loading = function() {
          var st = $(window).scrollTop(), sth = st + $(window).height();
          $.each(params.cache, function(i, data) {
                var o = data.obj, tag = data.tag, url = data.url;
               if (o) {
                    post = o.offset().top; posb = post + o.height();
                    if ((post > st && post < sth) || (posb > st && posb < sth)) {
                       //在浏览器窗口内
                       if (tag === "img") {
                          //图片，改变src
                          o.attr("src", url);
                       } else {
                            o.load(url);
                        }
                       data.obj = null;
                    }
               }
           });
         return false;
       };

      //事件触发
      //加载完毕即执行
       loading();
      //滚动执行
      $(window).bind("scroll", loading);
    };
})(jQuery);

下面介绍如何使用

1.首先加载js，由于是jquery，当然得先加载jquery库。

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

2.然后绑定对象

<script>
$(function() {
 $(".scrollLoading").scrollLoading();  //这里是绑定了类名为scrollLoading的对象
});
</script>

3.然后是使用了

<img class="scrollLoading" data-url="http://image.zhangxinxu.com/image/study/head/s180/1.jpeg" src="http://www.zhangxinxu.com/study/image/pixel.gif" width="180" height="180" style="background:url(http://www.zhangxinxu.com/study/image/loading.gif) no-repeat center;" />

这里是作者的源代码，这里做下说明。data-url是自定义属性，他的链接是图片的真实地址，src是个很小的透明图片地址，style里面的背景地址是个加载效果的gif图片。当真实图片还没加载完的时候是显示 style里面的背景图片。这样用户体验会好点，不加这个背景图片不影响使用。

这里就算是完了
这里是原文地址：www.zhangxinxu.com

这里是原博客的示例页面：http://www.zhangxinxu.com/study/201011/page-scroll-loading.html