1、懒加载 占位图、预览图 按需加载
1)原理
1>不加载全部图片
2>首先显示在页面中的图，首先进行加载
3>当屏幕发生滚动的时候，判断图片是否进入用户视野，来决定图片是否加载
2)编写步骤
1>首先，不要将图片地址放到src属性中，而是放到其它属性(data-original)中
2>页面加载完成后，根据scrollTop判断图片是否在用户的视野内，如果在，则将data-original属性中的值取出存放到src属性中
3>在滚动事件中重复判断图片是否进入视野，如果进入，则将data-original属性中的值取出存放到src属性中
3)插件
$("img").lazyload();
注意：图片需要提前设置高度
2、预加载 通常用于游戏
1)原理:
提前加载图片，当用户需要查看时可直接从本地缓存中渲染
2)图片存储的形式
1>图片存于数组
2>图片存于对象 推荐
3)封装:
1>传参：传递一个对象，数据都变为该对象的属性
2>回调函数
3>时刻做判断处理
3、懒加载与预加载的基本概念。
1)概念：
懒加载也叫延迟加载：JS图片延迟加载,延迟加载图片或符合某些条件时才加载某些图片。
预加载：提前加载图片，当用户需要查看时可直接从本地缓存中渲染。
2)区别：
两种技术的本质：两者的行为是相反的，一个是提前加载，一个是迟缓甚至不加载。懒加载对服务器前端有一定的缓解压力作用，预加载则会增加服务器前端压力。
3)懒加载的意义及实现方式有：
意义：
懒加载的主要目的是作为服务器前端的优化，减少请求数或延迟请求数。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户可以看到的区域，这个主要由监控滚动条来实现，一般会在距用户看到某图片前一定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
4)预加载的意义及实现方式有：
意义:
预加载可以说是牺牲服务器前端性能，换取更好的用户体验，这样可以使用户的操作得到最快的反映。
实现方式：
实现预载的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();设置其src来实现预载，再使用onload方法回调预载完成事件。只要浏览器把图片下载到本地，同样的src就会使用缓存，这是最基本也是最实用的预载方法。当Image下载完图片头后，会得到宽和高，因此可以在预载前得到图片的大小(方法是用记时器轮循宽高变化)。
1.简单封装一个预加载 懒加载尽量用插件
function preload(obj){
var data = obj.data;
var doneFn = obj.doneFn;
var progressFn = obj.progressFn;
var allCount = 0;
for(var key in data){
allCount++;
}
//创建一个空对象，用于存放加载好的图片对象
var imgsObj = {};
//遍历对象
for(var key in data){
var value = data[key]; //获取图片的src
//创建img对象
var img = new Image();
img.src = value;
// imgsObj.key = img; 这里不可以这样写，因为这样会使对象里面所有的属性名都为key会相互覆盖
imgsObj[key] = img; //这样写，这里的key是个变量，不会产生上述的问题
var doneCount = 0;
img.onload = function(){
doneCount++;
//计算当前的进度值
var v = doneCount/allCount*100;
if (progressFn) {
progressFn(v);
};
if (doneCount == allCount) {
if (doneFn) {
doneFn(imgsObj);
};
};
}
}
}
4、ES6模板字符串
1)ES6引入了一种新型的字符串字面量语法，我们称之为模板字符串（template strings）。除了使用反撇号字符 ` 代替普通字符串的引号 ' 或 " 外，它们看起来与普通字符串并无二致.
2)模板占位符中的代码可以是任意JavaScript表达式，所以函数调用、算数运算等这些都可以作为占位符使用，你甚至可以在一个模板字符串中嵌套另一个，我称之为模板套构（template inception）。
3)如果这两个值都不是字符串，可以按照常规将其转换为字符串。例如：如果action是一个对象，将会调用它的.toString()方法将其转换为字符串值。
4)如果你需要在模板字符串中书写反撇号，你必须使用反斜杠将其转义：`\``等价于"`"。
5)同样地，如果你需要在模板字符串中引入字符$和{。无论你要实现什么样的目标，你都需要用反斜杠转义每一个字符：`\$`和`\{`。
6)与普通字符串不同的是，模板字符串可以多行书写.
区别：
offset().top 相对当前视口的相对偏移
position().top 相对父元素的偏移
网友评论