| 标题 | 当滚动条到图片才显示图片 |
| 范文 | 当滚动条条滚动到图片位置再显示图片，像淘宝，京东等网站都采用了这样的js技术，这样可以是带宽使用减少，也可以增加用户体验。 下面将滚动条到图片才能显示图片的构思说一下: 即:当滚动条滚动时出发检查事件,检查每一个图片位置，当图片距离页面顶部位置小于滚动条加上浏览器高度时，则图片进行显示输出 jquery代码如下 首先将图片，设置一个value属性，让其为真实图片位置值，设置另一个src为一个小图片为等待图片。当图片达到图片位置时，将value值赋给src即可。 $(function(){ $(window).scroll( function() { $("img").each(function(i){ if($(this).offset().top<($(window).height()+document.documentElement.scrollTop-200)){ $(this).attr("src",$(this).attr("value")); } }); }); }); 解释一下上面的代码，本代码采用jquery弄的， offset().top是获取图片距离顶部高度当小于滚动条滚动距离document.documentElement.scrollTop加上浏览器高度$(window).height()时则进行显示，在这里-200是为了看效果，当图片出来200像素的 时候才进行图片显示 网上采用了jquery的jquery.lazyload.js公开组件，代码如下： $(function(){ $("img").lazyload({ placeholder : "默认等待图片", effect : "fadeIn" }); }); 采用的jquery的组件：下载lazyload.js <script language="javascript" src="jquery.lazyload.js"></script> 这就是当滚动条到图片处才显示图片的代码。 |
| 随便看 |
|
在线学习网范文大全提供好词好句、学习总结、工作总结、演讲稿等写作素材及范文模板，是学习及工作的有利工具。