预加载
1.1什么是预加载？
预加载就是提早加载图片，当用户须要查看时可直接从本地缓存中渲染。为何要使用预加载？css
1.2当页面中图片比较大的时候，页面加载的时候会出现该区域空白的效果或者看到图片正在慢慢地加载出来，为了提升用户体验，需
要把这些图片提早加载到缓存中，当用户一打开页面的时候，这些图片就会快速的呈现出来，得到更好的用户体验效果。
html
方法1,在CSS background中加载：会增长页面的总体加载时间前端
#preload-01 { background: url(-01.png) no-repeat -9999px -9999px; }
#preload-02 { background: url(-02.png) no-repeat -9999px -9999px; }
方法2，JS new image对象，设置src加载：经常使用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。java
function preloader() {
if (document.images) {
var img1 = new Image();
var img2 = new Image();
var img3 = new Image();
img1.src = ";;
img2.src = ";;
img3.src = ";;
}
}
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {//onload中未挂载函数才执行该JS
window.onload = function() {
if (oldonload) {
oldonload();
}
func();
}
}
}
addLoadEvent(preloader);
div.appendChild(img1);//插入到DOM
方法3，Ajax预加载,new Image()对象设置srcajax
window.onload = function() {
setTimeout(function() {
// XHR to request a JS and a CSS
var xhr = new XMLHttpRequest();
xhr.open('GET', url;);
xhr.send();
xhr = new XMLHttpRequest();
xhr.open('GET', url;);
xhr.send();
// preload image
new Image().src = ";;
}, 1000);
};
经常使用的是new Image();，设置其src来实现预载，再使用onload方法回调预载完成事件。
function loadImage(url, callback)
{
var img = new Image(); //建立一个Image对象，实现图片的预下载
img.src = url;
if (img.complete)
{ // 若是图片已经存在于浏览器缓存，直接调用回调函数
callback.call(img);
return; // 直接返回，不用再处理onload事件
}
img.onload = function ()
{ //图片下载完毕时异步调用callback函数。
callback.call(img);//将回调函数的this替换为Image对象 ，若是你直接用img.width的时候，图片尚未彻底下载下来
};
}
测试用例：
function imgLoaded()
{
alert(this.width);
}
<input type="button" value="loadImage" onclick="loadImage('aaa.jpg',imgLoaded)"/>
当图片加载过一次之后，若是再有对该图片的请求时，因为浏览器已经缓存住这张图片了，不会再发起一次新的请求，而是直接从缓存中加载过来。对于 firefox和safari，它们视图使这两种加载方式对用户透明，一样会引发图片的onload事件，而ie和opera则忽略了这种同一性，不会引发图片的onload事件
使用img标签或者经过标签的background-image属性均可以实现图片的预加载。可是为了不初次载入过多图片影响体验。通常最好在文档渲染完成之后再加载（使用window.onload等）。
场景：
若是某一个效果须要更换背景图片，那么图片会临时去加载，这样会出现图片须要一段时间才能显示出来，用户体验就会变差，因此图片须要预加载。好比照片墙，滚动图片什么，须要无缝显示图片的，以前加载好图片才不至于要显示下一张图片的时候临时去拉图片致使显示图片过慢。
懒加载
2.1什么是懒加载?
懒加载又称延迟加载。当访问一个页面的时候，须要先把img元素或者其余元素的背景图先用一张默认的图片代替（占位图），这样子浏览器
浏览器渲染页面的时候就只需请求一次。当图片出如今浏览器可视区域的时候，才设置图片的真实路径，把图片显示出来。缓存
2.2为何要使用图片懒加载？
当页面中图片的数量多到必定数量的时候，而且图片大小比较大，好比各类商场网站，图片素材网等等。若是在页面一加载的时候就
加载所有图片，显然会影响网站加载速度和加大服务器负担，并且用户体验也必然很差，那么这时候能够采用懒加载。服务器
2.3 懒加载具体实现原理
页面中的img元素之因此会发送http请求的缘由是设置了src属性，不然浏览器就不会发送请求去下载这个图片。首先在页面中把全部app
的图片用一张占位图进行占位，而且在元素下设置data-src自定义属性，存放图片的真实路径，当须要用到的时候取出该真实路径动
态添加给src。
意义： 懒加载的主要目的是做为服务器前端的优化，缓解服务器前端压力，一次性请求次数减小或延迟请求。
实现方式：
1.第一种是纯粹的延迟加载，使用setTimeOut或setInterval进行加载延迟.
2.第二种是条件加载，符合某些条件，或触发了某些事件才开始异步下载。
3.第三种是可视区加载，即仅加载用户能够看到的区域，这个主要由监控滚动条来实现，通常会在距用户看到某图片前必定距离遍开始加载，这样能保证用户拉下时正好能看到图片。
图片没拉回来也会触发onerror事件
懒加载：将图片src赋值为一张默认图片，当用户滚动滚动条到可视区域图片时候，再去加载真正的图片
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Lazyload 2</title>
<style>
img {
display: block;
margin-bottom: 50px;
height: 200px;
}
</style>
</head>
<body>
<img src="images/loading.gif" data-src="images/1.png">
<img src="images/loading.gif" data-src="images/2.png">
<img src="images/loading.gif" data-src="images/3.png">
<img src="images/loading.gif" data-src="images/4.png">
<img src="images/loading.gif" data-src="images/5.png">
<img src="images/loading.gif" data-src="images/6.png">
<img src="images/loading.gif" data-src="images/7.png">
<img src="images/loading.gif" data-src="images/8.png">
<img src="images/loading.gif" data-src="images/9.png">
<img src="images/loading.gif" data-src="images/10.png">
<img src="images/loading.gif" data-src="images/11.png">
<img src="images/loading.gif" data-src="images/12.png">
<script>
function throttle(fn, delay, atleast) {//函数绑定在 scroll 事件上，当页面滚动时，避免函数被高频触发，
var timeout = null,//进行去抖处理
startTime = new Date();
return function() {
var curTime = new Date();
clearTimeout(timeout);
if(curTime - startTime >= atleast) {
fn();
startTime = curTime;
}else {
timeout = setTimeout(fn, delay);
}
}
}
function lazyload() {
var images = document.getElementsByTagName('img');
var len = images.length;
var n = 0; //存储图片加载到的位置，避免每次都从第一张图片开始遍历
return function() {
var seeHeight = document.documentElement.clientHeight;
var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
for(var i = n; i < len; i++) {
if(images[i].offsetTop < seeHeight + scrollTop) {
if(images[i].getAttribute('src') === 'images/loading.gif') {
images[i].src = images[i].getAttribute('data-src');
}
n = n + 1;
}
}
}
}
var loadImages = lazyload();
loadImages(); //初始化首页的页面图片
window.addEventListener('scroll', throttle(loadImages, 500, 1000), false);
//函数节流（throttle）与函数去抖（debounce）处理,
//500ms 的延迟，和 1000ms 的间隔，当超过 1000ms 未触发该函数，则当即执行该函数，否则则延迟 500ms 执行该函数
</script>
</body>
</html>