滚屏到相应位置才加载图片-优化页面访问速度

一个页面图片太多了就有压力。但如果总是分页，每页鸡碎那么多，用户又会很烦。

可以滚屏到相应位置才加载图片，这样就皆大欢喜了。

原理如下：

1、使用jquery

2、需要动态加载的<img>增加一个属性（自己创建的）data-url=真正图片路径，而将src=一个只有1像素的透明GIF，style设置一个不停地转圈的等待图片作为背景，class="scl"

3、相应的jquery对凡是class="scl"的，当屏幕可见时，就将data-url来替换src，这样就可以实现动态加载。在用户这边看来，拉动屏幕到这些图片，会看见它们由一个不停地转动的图片变为真正想看的图片。

代码如下：

jquery.scrollLoading.js

[javascript] view plain copy print ?

1. /*!
2. * jquery.scrollLoading.js
3. * by zhangxinxu  http://www.zhangxinxu.com
4. * 2010-11-19 v1.0
5. * 2012-01-13 v1.1 偏移值计算修改 position → offset
6. */ 
7. (function($) { 
8.     $.fn.scrollLoading = function(options) { 
9.         var defaults = { 
10.             attr: "data-url" 
11.         }; 
12.         var params = $.extend({}, defaults, options || {}); 
13.         params.cache = []; 
14.         $(this).each(function() { 
15.             var node = this.nodeName.toLowerCase(), url = $(this).attr(params["attr"]); 
16.             if (!url) { return; } 
17.             //重组 
18.             var data = { 
19.                 obj: $(this), 
20.                 tag: node, 
21.                 url: url 
22.             }; 
23.             params.cache.push(data); 
24.         }); 
25.  
26.         //动态显示数据 
27.         var loading = function() { 
28.             var st = $(window).scrollTop(), sth = st + $(window).height(); 
29.             $.each(params.cache, function(i, data) { 
30.                 var o = data.obj, tag = data.tag, url = data.url; 
31.                 if (o) { 
32.                     post = o.offset().top; posb = post + o.height(); 
33.                     if ((post > st && post < sth) || (posb > st && posb < sth)) { 
34.                         //在浏览器窗口内 
35.                         if (tag === "img") { 
36.                             //图片，改变src 
37.                             o.load(function() { 
38.                                 o.removeClass("wimg"); 
39.                             }); 
40.                             o.attr("src", url); 
41.                         } else { 
42.                             o.load(url); 
43.                         } 
44.                         data.obj = null; 
45.                     } 
46.                 } 
47.             }); 
48.             return false; 
49.         }; 
50.  
51.         //事件触发 
52.         //加载完毕即执行 
53.         loading(); 
54.         //滚动执行 
55.         $(window).bind("scroll", loading); 
56.     }; 
57. })(jQuery); 

/*!
 * jquery.scrollLoading.js
 * by zhangxinxu  http://www.zhangxinxu.com
 * 2010-11-19 v1.0
 * 2012-01-13 v1.1 偏移值计算修改 position → offset
*/
(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.load(function() {
                                o.removeClass("wimg");
                            });
                            o.attr("src", url);
                        } else {
                            o.load(url);
                        }
                        data.obj = null;
                    }
                }
            });
            return false;
        };

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

页面

[html] view plain copy print ?

1. <style type="text/css"> 
2.     .scl{background:url(/img/loading.gif) no-repeat center;} 
3.     .wimg{width:300px;height:200px;} 
4. </style> 

    <style type="text/css">
        .scl{background:url(/img/loading.gif) no-repeat center;}
        .wimg{width:300px;height:200px;}
    </style>

[html] view plain copy print ?

1. <script type="text/javascript" src="/js/jquery.scrollLoading.js?ver=120308_3"></script> 
2.  
3. <script type='text/javascript' src='http://cbjs.baidu.com/js/m.js'></script> 

    <script type="text/javascript" src="/js/jquery.scrollLoading.js?ver=120308_3"></script>

    <script type='text/javascript' src='http://cbjs.baidu.com/js/m.js'></script>

[html] view plain copy print ?

1. <a href='/show.aspx?id=33210947&i=1' target='_blank'><img class="scl" src='/img/pixel.gif' data-url="Upload/2/PicMiniSize/2012-3-9/201203090246063866.jpg"/></a><br/><a href='/show.aspx?id=33210947&i=1' target='_blank'>成熟女人艳如桃……（第一百零五辑）</a> 

                <a href='/show.aspx?id=33210947&i=1' target='_blank'><img class="scl" src='/img/pixel.gif' data-url="Upload/2/PicMiniSize/2012-3-9/201203090246063866.jpg"/></a><br/><a href='/show.aspx?id=33210947&i=1' target='_blank'>成熟女人艳如桃……（第一百零五辑）</a>

[html] view plain copy print ?

1. <script type="text/javascript"> 
2.     $(function() { 
3.         $(".scl").scrollLoading(); 
4.     }); 
5. </script> 

<script type="text/javascript">
    $(function() {
        $(".scl").scrollLoading();
    });
</script>

这里有一个问题，就是有时真正图片的尺寸不一定能事先知道，所以一般不指定 width 和 height。但这里暂代图片只有1像素，不指定足够大的尺寸，根本看不到不停地转圈等待那个效果；但如果指定了，比如width=300px,height=200px，那真正图片出来后，也只有这么大，并且看起来变形。解决办法是，加载前指定width=300px,height=200px，加载完成后，再将这个指定去掉。

所以我们定义了一个CSS class :.wimg{width:300px;height:200px;}，加载完成后去掉这个wimg。jquery.scrollLoading.js中有这么一句：

[javascript] view plain copy print ?

1. //图片，改变src 
2.                             o.load(function() { 
3.                                 o.removeClass("wimg"); 
4.                             }); 

//图片，改变src
                            o.load(function() {
                                o.removeClass("wimg");
                            });

参照文章

jQuery页面滚动图片等元素动态加载实现