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 />
评论