JavaScript实现页面滚动图片加载(模仿lazyload效果)

你为什么写这篇文章？1.优化页面是一种实用的方法，技术实现并不难；2.搜索有相关内容的文章好像用的是jQuery方法，但是如果不用jQuery站长，就不能用这个方法吗？3.做技术分享也是为了让更多的人自己去测试，因为这个其实是项目中用到的，都是自己琢磨的。如果有问题，请指出来，先谢谢。4.我还没有写这个月的博客。5.刚好没有工作任务，那什么时候等.当前页面大多具有内容丰富、图片较多的特点；像淘宝，JD.COM，我们经常浏览的团购网站(我是网上买的，意思是一个月不在网上花点钱我就不开心了)，一个页面几十张图片叫毛毛Rain，所以现在流行一种方法——滚动动态加载。这种方法可以在很大程度上解决HTTP请求。首先，页面只加载窗口显示区的图片，然后只有当页面滚动滚动到对应位置时才加载图片，这样网页才能快速加载(请求少，加载的东西少，岂不是更快)？《高性能网站建设指南》第一章中说降低HTTP请求的重要性是提高网页前端性能，优化页面加载速度的一种实用方法。原则：1。将滚动事件绑定到页面；2.加载页面时将真实图片地址放入属性中；3.然后判断滚动时元素是否进入当前浏览器窗口；4.最后是加载图片，当然加载什么，使用什么样的用户体验都由你决定；困难：浏览器兼容性是造成困难的原因。DOM标准和IE标准每天都由前端工作处理。想想下面的代码：1.window.pageYOffset？window . pageyooffset : window . document . document element . scroll top目标：获取当前页面相对于窗口显示区域左上角的y位置。DOM标准：window.pageYOffsetIE标准： window . document . document element . scroll top 2 . window . inner height？window . inner height : document . document element . client height object :以像素为单位声明窗口的文档显示区域的高度和宽度。DOM标准：innerheight和innerwidthie标准：document.documentElement或ducument.body(与DTD相关)的ClIEntwidth和clientHeight属性替换为3.obj.getBoundingClientRect()。top window . document . document element . scroll top window . document . body . scroll top目标：获取页面元素的位置。当浏览器为非webkit内核时，document.body.scrolltop的值始终为0，只有使用document . document element . scroll top才能得到正确的值：当浏览器为webkit内核时，document . document element . scroll top的值恒定为0，使用document.body。我还搜索了一个与DTD相关的说法(即当页面指定DOCTYPE时，使用document.documentElement当页面上没有指定DOCTYPE时，使用document.body)。请确保你认识的朋友能帮你指出来。谢谢您们。详情：1。因为真实地址原本在某个属性中(默认为xsrc，可以自行设置)，所以默认图片地址应该是一个像素的透明图片，这样可以避免浏览器中出现红X；

2.在图片负荷的时候可以加入等待的图片，这样用户才会知道这里有图片需要加载，良好的用户体验是前端一直所追求的（例子中有体现);3.在图片负荷成功后可以加入合适的显示效果（例子中木有体现，可以自己尝试);Java脚本语言源码如下：复制代码代码如下： var scrollLoad=(函数（选项){ var defaults=(参数。长度==0)？{ src: 'xSrc '，时间： 300 } : { src :选项。src | | ' Xsrc '，时间：选项。时间| | 300 }；var camelize=function(s){ return s . replace(//(\ w)/g，function (strMatch，P1){ return P1。touppercase()；});};this.getStyle=function (element，property) { if (arguments.length！=2)返回假声值=元素。风格[山茶花(属性)]；if(！value){ if(文档。默认视图文档。默认视图。getcomputed style){ var CSS=document。默认视图。getcomputed style(元素，null)；值=css？css.getPropertyValue(属性): null} else if(元素。currentstyle){ value=element。current style[camelize(property)]；} }返回值=='自动'？' :值；};var _ init=function(){ var offset page=window。pageyoffset？窗户。pageyoffset :窗口。文件。文档元素。向上滚动，偏移量窗口=偏移量页码(窗口。内心高度？窗户。内部高度：文件。文档元素。客户端高度)，docImg=document.images，_ len=docImg.lengthif(！_len)返回false for(var I=0；i _ leni ) { var attrSrc=docImg[i].getAttribute(defaults.src)，o=docImg[i]，tag=o . nodename。tolowercase()；if(o){ PostPage=o . GetBoundingClientRect().顶窗。文件。文档元素。滚动顶部窗口。文件。尸体。滚动顶部；后置窗口=后置页码(this.getStyle(o，' height ').替换(' px '，' ')；if((post Page offset Page post Page offset window)| |(post window offset Page post window offset window)){ if(tag===' img ' attrSrc！==null) { o.setAttribute('src '，Attr src)；} o=null } } }窗户。onscroll=function(){ setTimeout(function(){ _ init()；}，默认值。时间)；} };return _ init()；});scrolLoad()；可传递一个参数设置科学研究委员会原地址和响应时间复制代码代码如下： scrolLoad({ src : ' UserSrc '，//字符串型时间： 100 /数字型})演示下载