1、懶加載 占位圖、預覽圖 按需加載
1)原理
1>不加載全部圖片
2>首先顯示在頁面中的圖，首先進行加載
3>當屏幕發(fā)生滾動的時候，判斷圖片是否進入用戶視野，來決定圖片是否加載
2)編寫步驟
1>首先，不要將圖片地址放到src屬性中，而是放到其它屬性(data-original)中
2>頁面加載完成后，根據(jù)scrollTop判斷圖片是否在用戶的視野內(nèi)，如果在，則將data-original屬性中的值取出存放到src屬性中
3>在滾動事件中重復判斷圖片是否進入視野，如果進入，則將data-original屬性中的值取出存放到src屬性中
3)插件
$("img").lazyload();
注意：圖片需要提前設置高度
2、預加載 通常用于游戲
1)原理:
提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染
2)圖片存儲的形式
1>圖片存于數(shù)組
2>圖片存于對象 推薦
3)封裝:
1>傳參：傳遞一個對象，數(shù)據(jù)都變?yōu)樵搶ο蟮膶傩? 2>回調(diào)函數(shù)
3>時刻做判斷處理
3、懶加載與預加載的基本概念。
1)概念：
懶加載也叫延遲加載：JS圖片延遲加載,延遲加載圖片或符合某些條件時才加載某些圖片。
預加載：提前加載圖片，當用戶需要查看時可直接從本地緩存中渲染。
2)區(qū)別：
兩種技術的本質(zhì)：兩者的行為是相反的，一個是提前加載，一個是遲緩甚至不加載。懶加載對服務器前端有一定的緩解壓力作用，預加載則會增加服務器前端壓力。
3)懶加載的意義及實現(xiàn)方式有：
意義：
懶加載的主要目的是作為服務器前端的優(yōu)化，減少請求數(shù)或延遲請求數(shù)。
實現(xiàn)方式：
1.第一種是純粹的延遲加載，使用setTimeOut或setInterval進行加載延遲.
2.第二種是條件加載，符合某些條件，或觸發(fā)了某些事件才開始異步下載。
3.第三種是可視區(qū)加載，即僅加載用戶可以看到的區(qū)域，這個主要由監(jiān)控滾動條來實現(xiàn)，一般會在距用戶看到某圖片前一定距離遍開始加載，這樣能保證用戶拉下時正好能看到圖片。
4)預加載的意義及實現(xiàn)方式有：
意義:
預加載可以說是犧牲服務器前端性能，換取更好的用戶體驗，這樣可以使用戶的操作得到最快的反映。
實現(xiàn)方式：
實現(xiàn)預載的方法非常多，可以用CSS(background)、JS(Image)、HTML(<img />)都可以。常用的是new Image();設置其src來實現(xiàn)預載，再使用onload方法回調(diào)預載完成事件。只要瀏覽器把圖片下載到本地，同樣的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++;
}
//創(chuàng)建一個空對象，用于存放加載好的圖片對象
var imgsObj = {};
//遍歷對象
for(var key in data){
var value = data[key]; //獲取圖片的src
//創(chuàng)建img對象
var img = new Image();
img.src = value;
// imgsObj.key = img; 這里不可以這樣寫，因為這樣會使對象里面所有的屬性名都為key會相互覆蓋
imgsObj[key] = img; //這樣寫，這里的key是個變量，不會產(chǎn)生上述的問題
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表達式，所以函數(shù)調(diào)用、算數(shù)運算等這些都可以作為占位符使用，你甚至可以在一個模板字符串中嵌套另一個，我稱之為模板套構（template inception）。
3)如果這兩個值都不是字符串，可以按照常規(guī)將其轉(zhuǎn)換為字符串。例如：如果action是一個對象，將會調(diào)用它的.toString()方法將其轉(zhuǎn)換為字符串值。
4)如果你需要在模板字符串中書寫反撇號，你必須使用反斜杠將其轉(zhuǎn)義：`\``等價于"`"。
5)同樣地，如果你需要在模板字符串中引入字符$和{。無論你要實現(xiàn)什么樣的目標，你都需要用反斜杠轉(zhuǎn)義每一個字符：`\$`和`\{`。
6)與普通字符串不同的是，模板字符串可以多行書寫.
區(qū)別：
offset().top 相對當前視口的相對偏移
position().top 相對父元素的偏移
