滚屏到相应位置才加载图片的js代码

发布时间:2020-07-25编辑:脚本学堂
本文介绍js实现滚屏到相应位置才加载图片的代码,这样可以避免一大堆图片同时加载,即浪费资源,用户也会反感。有需要的朋友,可以参考下。

原理分析:
1)、使用jquery来实现该功能。
2)、为动态加载的<img>增加一个属性(自己创建的)data-url=真正图片路径,而将src=一个只有1像素的透明GIF,style设置一个不停地转圈的等待图片作为背景,class="scl"。
3)、相应的jquery对象是class="scl"的,当屏幕可见时,就将data-url来替换src,实现动态加载。
在用户看来,拉动屏幕到这些图片,会看见它们由一个不停地转动的图片变为真正想看的图片。

1、jquery.scrollLoading.js
 

复制代码 代码示例:
/*!
 * jquery.scrollLoading.js
 * by zhangxinxu  http://www.jb200.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); 

2、页面
 

复制代码 代码示例:

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

<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'>脚本学堂-www.jb200.com,欢迎大家的光临!</a> 

<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中有这么一句:
 

复制代码 代码示例:
//图片,改变src 
o.load(function() { 
   o.removeClass("wimg"); 
});