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

相信大家见过好多随着页面滚动，动态加载图片等元素的网站，我也是，以前见了好多，只是没时间去研究，今天晚上有空，百度了一下找了一个jquery插件，作者张鑫旭，效果挺好，代码也很简单，使用更方便，废话不多说，贴代码：

使用代码：

 

<html><?xml:namespace prefix = o ns = "urn:schemas-microsoft-com:office:office" />
<head>
    <title>scrollLoadingImg by zhaozi</title>
    <script type="text/javascript" src="js/jquery.js"></script>
    <script type="text/javascript" src="js/jquery.scrollLoading-min.js"></script>
    <style type="text/css">
    .loadingImg{background:url(loading.gif) no-repeat center;}
    </style>
    <script type="text/javascript">
    $(function(){
        $(".loadingImg").scrollLoading();
    })
    </script>
</head>
<body>
<img class="loadingImg" src="pixel.gif" data-url="http://www.hb114.cc/ad/img/201012272857838.gif" width="300" height="300" />
</body>
</html>

 

说明：.

 

loadingImg //给图片加个正在加载的图片

 

pixel.gif  //1像素图片

 

 

 

jquery.scrollLoading-min.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.position().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);

 

over

posted @ 2012-03-24 11:20  WebApi  阅读(4678)  评论(1)  编辑  收藏  举报
CopyRight © 博客园 WebAPI