JS里面的懒加载(lazyload)
2018-09-18 06:37:16来源:博客园 阅读 ()
懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载
涉及到图片,falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽,且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源,让用户等待太久,
来,举个栗子,当你去东哥的绿帽网网购的时候,打开首页的时候,直接在导航栏选了商品种类跳转到了列表页,那首页下方那些未显示的区域的图片需不需要加载,当然不需要了,你根本没看他们,加载出来干啥
说白了就是占着茅坑不拉粑粑,那我们怎么解决呢,这时我们就该用到懒加载技术,只有当这部分图片出现在可视区内再去请求服务器。
懒加载的核心:在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域)
下面来一个大栗子
来,把朕的代码例子呈上来
例子的思路:页面渲染时将src路径放到自定义属性中去,这样页面加载时图片就不会去请求服务器,当图片滚动到可视区内时,获取它的自定义属性并赋值给src
这是页面的布局,图片路径注意改一下子
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> *{margin:0;padding:0;} img{ width: 200px; height: 200px; display: block; float: left; } </style> </head> <body> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg"> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg"> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg"> <img src="" data-url ="img/1.jpg"> <img src="" data-url ="img/2.jpg"> <img src="" data-url ="img/3.jpg"> <img src="" data-url ="img/4.jpg"> <img src="" data-url ="img/5.jpg"> <img src="" data-url ="img/6.jpg"> <img src="" data-url ="img/7.jpg"> <img src="" data-url ="img/8.jpg"> <img src="" data-url ="img/9.jpg"> <img src="" data-url ="img/10.jpg">
来 上关键的JS代码
<script> //页面加载时先调用一次loadImg函数 loadImg() //添加滚动事件 window.onscroll = function () { loadImg() } function loadImg() { var iH = document.documentElement.clientHeight; var t = document.documentElement.scrollTop || document.body.scrollTop; var img = document.getElementsByTagName("img"); for (var i = 0; i < img.length; i++) { if ((!img[i].bstop) && offsetTop1(img[i]) < (iH + t)) { //注意 真正在页面上使用一定要加开关,不加开关每次条件符合时都会重新请求服务器,还不如不用懒加载 //理解不了啥意思的同学,可以把img[i].bstop删去试试 //同时不要用offsetTop //因为offsetTop是获取离已定位的父元素的top值 //所以自己封装一个计算offsetTop的函数 var src = img[i].getAttribute("data-url"); img[i].src = src; img[i].bstop = true; console.log(1) } } } //封装获取元素离上方的高度的函数 function offsetTop1(obj) { var t = obj.offsetTop; while (obj.offsetparent) { obj = obj.offsetparent; t = t + obj.offsetTop; } return t; } </script>
标签:
版权申明:本站文章部分自网络,如有侵权,请联系:west999com@outlook.com
特别注意:本站所有转载文章言论不代表本站观点,本站所提供的摄影照片,插画,设计作品,如需使用,请与原作者联系,版权归原作者所有
- js调用刷新界面的几种方式 2020-03-05
- 默认让页面的第一个控件选中的javascript代码 2020-02-20
- JS动态加载脚本的方法 2020-02-14
- IE8中使用javascript动态加载CSS的解决方法 2019-12-02
- 在HTML页面加载完毕后运行某个js的实现方法 2019-11-25
IDC资讯: 主机资讯 注册资讯 托管资讯 vps资讯 网站建设
网站运营: 建站经验 策划盈利 搜索优化 网站推广 免费资源
网络编程: Asp.Net编程 Asp编程 Php编程 Xml编程 Access Mssql Mysql 其它
服务器技术: Web服务器 Ftp服务器 Mail服务器 Dns服务器 安全防护
软件技巧: 其它软件 Word Excel Powerpoint Ghost Vista QQ空间 QQ FlashGet 迅雷
网页制作: FrontPages Dreamweaver Javascript css photoshop fireworks Flash