织梦做电子商务网站,做网站要学的教程,杨和关键词优化,网站建设论文读书笔记懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片#xff0c;falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽#xff0c;且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载… 懒加载技术(简称lazyload)并不是新技术, 它是js程序员对网页性能优化的一种方案.lazyload的核心是按需加载 涉及到图片falsh资源 , iframe, 网页编辑器(类似FCK)等占用较大带宽且这些模块暂且不在浏览器可视区内,因此可以使用lazyload在适当的时候加载该类资源.避免网页打开时加载过多资源让用户等待太久 来举个栗子当你去东哥的绿帽网网购的时候打开首页的时候直接在导航栏选了商品种类跳转到了列表页那首页下方那些未显示的区域的图片需不需要加载当然不需要了你根本没看他们加载出来干啥 说白了就是占着茅坑不拉粑粑那我们怎么解决呢这时我们就该用到懒加载技术只有当这部分图片出现在可视区内再去请求服务器。 懒加载的核心在如何在适当的时候加载用户需要的资源(这里用户需要的资源指该资源呈现在浏览器可视区域) 下面来一个大栗子 来把朕的代码例子呈上来 例子的思路页面渲染时将src路径放到自定义属性中去这样页面加载时图片就不会去请求服务器当图片滚动到可视区内时获取它的自定义属性并赋值给src 这是页面的布局图片路径注意改一下子 !DOCTYPE html
html langen
headmeta charsetUTF-8titleDocument/titlestyle*{margin:0;padding:0;}img{width: 200px;height: 200px;display: block;float: left;}/style
/head
bodyimg src data-url img/1.jpgimg src data-url img/2.jpgimg src data-url img/3.jpgimg src data-url img/4.jpgimg src data-url img/5.jpgimg src data-url img/6.jpgimg src data-url img/7.jpgimg src data-url img/8.jpgimg src data-url img/9.jpgimg src data-url img/10.jpgimg src data-url img/1.jpgimg src data-url img/2.jpgimg src data-url img/3.jpgimg src data-url img/4.jpgimg src data-url img/5.jpgimg src data-url img/6.jpgimg src data-url img/7.jpgimg src data-url img/8.jpgimg src data-url img/9.jpgimg src data-url img/10.jpgimg src data-url img/1.jpgimg src data-url img/2.jpgimg src data-url img/3.jpgimg src data-url img/4.jpgimg src data-url img/5.jpgimg src data-url img/6.jpgimg src data-url img/7.jpgimg src data-url img/8.jpgimg src data-url img/9.jpgimg src data-url img/10.jpgimg src data-url img/1.jpgimg src data-url img/2.jpgimg src data-url img/3.jpgimg src data-url img/4.jpgimg src data-url img/5.jpgimg src data-url img/6.jpgimg src data-url img/7.jpgimg src data-url img/8.jpgimg src data-url img/9.jpgimg 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 更多专业前端知识请上
【猿2048】www.mk2048.com
