懒加载预加载问题

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 相对父元素的偏移