知识大全网页前端优化之滚动延时加载图片示例

Posted 2022-07-20 知

篇首语：心静可以生慧，行善方能得福。本文由小常识网(cha138.com)小编为大家整理，主要介绍了知识大全网页前端优化之滚动延时加载图片示例相关的知识，希望对你有一定的参考价值。

做web开发的朋友都应该掌握前端优化这个技巧其中一个就是滚动延时加载这个技巧应用在了很多地方比如新浪微博网页版以下就为大家详细介绍需要的朋友可以参考下

　　为什么要延时加载呢？页面加载的时候就显示全部的图片不就得了？有必要多此一举吗？答案是肯定的当要加载的图片或者内容很多时如果一次性加载完毕那么整个页面将会加载很久意味着要用户等待很久这是对用户不友好的或许你还会问那不就做个分页不就得了？其实这种滚动延时加载的技巧正是用来代替手动点击下一页的分页技术每换一页都要用户点击一次这也是对用户不友好的所以才有了滚动延时加载

　　我这里把加载图片作为例子就好像百度图片里的一样你往下滚动它就会继续显示下一页的图片

　　要求是这样的比如我要加载张图片在页面加载完毕后我先加载张（前提是张已经占满浏览器窗口高度）当滚动条滚动到浏览器底部的时候再加载张一共加载次

　　原理是这样的先获取当前浏览器的窗口高度a 然后给页面绑定一个滚动条滚动事件当滚动条滚动的时候首先判断时候已经加载了张如果小于张再获取当前文档距离顶部的高度b以及图片内容的高度c 如果a+b>=c 继续加载张图片

　　我说过我喜欢以尽可能少的代码以及尽可能简单的demo来为有需要的人展示一些强大的功能因为所有的东西原理其实都很简单越简单的demo越容易让人理解和接受所以代码很少 直接上代码

复制代码代码如下: <!DOCTYPE > < xmlns=" <head> <meta equiv="Content Type" content="text/; charset=utf " /> <title>页面滚动延迟加载图片</title> <style type=text/css> body margin: px; ul list style: none; margin: px; padding: px; </style> <script type=text/javascript src=jquery min js></script> <script type=text/javascript> var n = ; var winHeight = $(window) height(); $(function () loadimg(); $(window) scroll(function () if (n < ) var docTop = $(document) scrollTop(); var contentHeight = $("#content") height(); if (docTop + winHeight >= contentHeight ) loadimg(); ); ); function loadimg() for (i = ; i < ; i++) $("#content") append("<li><img src= jpg /></li>"); n += ; </script> </head> <body> <ul id="content"> </ul> </body> </>

　　这里使用了jqury框架是为了让代码更少更简单如果你可以手写纯js代码来实现这个功能当然最好不过毕竟是优化这个小小的功能也不需要使用到任何 js框架不过个人比较喜欢jquery框架毕竟在大项目中手写纯js代码将会严重拖慢整个项目的进度有一个强大的js框架摆在面前合理运用还是能提高开发效率的而且在一个大项目中 jquery不是仅仅能帮你实现这个小小的功能而已像Ajax 它是能轻轻松松就能帮你搞定的另外我这里只是写死了加载这一张图片事实上它应该是使用Ajax来请求新的图片然后加载到页面里的因为想尽量简单就没有涉及后台逻辑所以只加载这一张图片

cha138/Article/program/Java/JSP/201311/20174

知识大全 网页前端优化之滚动延时加载图片示例

知识大全网页前端优化之滚动延时加载图片示例