jQuery 实现图片滚动加载（）

实现原理：

加载页面的时候默认跟图片一个没加载之前的背景图，然后给每个img标签添加一个新的属性，让这个属性的值为图片的真实路径，监听滚动条，如果滚动的高度加上当前图片高度（可自定义）大于窗口的可视高度，则执行runing();函数对符合条件的图片进行属性修改，这样就可以实现图片跟随滚动条进行加载。

html代码：

<div class="img-loading-after">     <img src="/statics/front/img/loading-bg.png" alt="" data-img="<?php echo $product['image_path'];?>"></div>

js代码：

$(function(){

<span style="white-space:pre"></span><pre name="code" class="javascript">var $winH = $(window).height();//获取窗口高度    var $imgH = -100;//parseInt($img.height()/2);//图片到一半的时候显示    var $srcDef = "/statics/front/img/loading-bg.png";    runing();//页面刚载入时判断要显示的图片    $(window).scroll(function(){        runing();//滚动刷新    })    function runing(){        var $img = $(".img-loading-after img");        $img.each(function(i){//遍历img            var $src = $img.eq(i).attr("data-img");//获取当前img URL地址            var $scroTop = $img.eq(i).offset();//获取图片位置            if($scroTop.top + $imgH >= $(window).scrollTop() && $(window).scrollTop() + $winH >= $scroTop.top + $imgH){//判断窗口至上往下的位置                if($img.eq(i).attr("src") == $srcDef){                    /*$img.eq(i).hide();*/                    $img.eq(i).attr("src",function(){return $src}).fadeIn(30);//元素属性交换                    $img.eq(i).parent().removeClass("img-loading-after");               }           }      })  }

});

如果页面首次加载也执行的是ajax的话，这个函数需要在页面加载完成之后才能执行，可以摆代码加载window.onload()方法里。例如：

window.onload=function(){};

这样就可以实现图片跟随滚动条实现延时加载了