jquery 页面滚动图片动态加载效果

2011-08-16 17:56  1513人阅读  评论 (0)
Tags: jquery

jquery 页面滚动图片动态加载效果

本人只测试了chrome ie8 ie6通过,其他浏览器未测试

代码如下:

d.html

<!doctype html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script>
$(function(){
    $(window).scroll(function(){
        var screen_height = window.innerHeight ? window.innerHeight : document.documentElement.clientHeight;
        $('.Jimgload').each(function(){
            var obj_screen_top = this.getBoundingClientRect().top;
            if(obj_screen_top < screen_height){
                this.src = $(this).removeClass('Jimgload').attr('xsrc');
            }
        });
    }).scroll();
});
</script>
<img src="img/ljr_001.jpg" xsrc="img/ljr_001.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_002.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_003.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_004.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_005.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_006.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_007.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_008.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_009.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_010.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_011.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_012.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_013.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_014.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_015.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_016.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_017.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_018.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_019.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_020.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_021.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_022.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_023.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_024.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_025.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_026.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_027.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_028.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_029.jpg" class="Jimgload" /><br />
<img src="img/ljr_001.jpg" xsrc="img/ljr_030.jpg" class="Jimgload" /><br />