现在，出于性能与灵活性方面的斟酌，我们都将一些小图片替代成矢量图或许字体。除了这些能被替代的小图以外，另有一些不能不运用位图的场景，如照片、背景等。关于这些位图，我们须要斟酌它们在加载历程当中的差别状况，而制订差别的表现计划。
图片加载历程当中的状况，大抵包含：
什么时候决议加载图片
加载中
加载完毕，失利的处置惩罚
本文将对照加载历程当中的各个状况表现的差别完成计划，并对计划的浅易水平、兼容性、可扩展性举行剖析。
决议加载图片的机遇
平常状况，页面加载时图片资本作为零丁的要求向服务器猎取。偶然，由于图片的数目与大小的影响，这致使页面加载迟缓，而且加载了很多用户未触发的图片，也白白浪费了流量；偶然，又须要保证用户阅读网页的流畅性，不能不预先加载好图片，等用户触发显现图片。
可见，准确的图片加载机遇对进步用户体验有很大的协助。本小节将议论与图片加载机遇相干的手艺：预加载与懒加载。
预加载
预加载手艺就是<u>在用户触发图片显现之前，先将图片加载到当地</u>。当用户触发图片显现的事宜时，阅读器能够实时衬着出图片，保证了用户阅读网页的流畅性。那末，怎样完成预加载呢？本文将引见三种完成预加载的手艺。
应用CSS完成预加载
该要领只需<u>将欲加载的图片url写入某个隐蔽元素的background属性中</u>，让这张图片和CSS文件同时加载。当用户触发显现图片的事宜时，再将图片插进去到目的位置。
以下代码所示，这里用到CSS3的background多图片特征，只需一个隐蔽元素即可预加载一切图片。
.nothing-1 {
display: none;
background: url('1.jpg'), url('2.jpg'), url('3.jpg');
}（关于background多图片特征的兼容性：http://caniuse.com/#search=cs… ）
该要领的瑕玷在于没法掌握预加载的机遇，只能是页面加载时一同加载图片，假如图片过量，会壅塞页面的load事宜，延伸页面加载时候。
只应用JavaScript完成预加载
第二种完成预加载的手艺，是<u>直接运用JavaScript新建Image对象</u>，对其src属性赋值。
以下代码所示：
var image = new Image();
image.src = '...img url';
image.onload = function() { ... }
image.onerror = function () { ... }还能够应用Image对象的load事宜和error事宜，完成图片预加载和失利以后的处置惩罚，如一切图片加载完成后的提醒等。
应用Ajax完成预加载
末了这类要领则是<u>直接发送ajax要求，猎取图片资本</u>。一样，可将ajax要求胜利与失利的回调，作为图片预加载胜利与失利的处置惩罚。
以下代码所示（仅针对webkit阅读器）：
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
if (xhr.readyState == 4) {
if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
...
}
}
}
xhr.open("GET", '...img url');
xhr.send('');Ajax要求要领无需过剩的Image对象，而且<u>猎取的资本也不仅局限于图片</u>。
懒加载
懒加载的中心头脑是<u>依据用户须要加载图片资本，并非在衬着页面时就猎取一切图片</u>。云云，不仅能够减轻服务器的压力节约用户流量，还能够进步页面加载速率。
完成思绪
起首，将页面中一切图片url写进img的’data-src’属性，并将默许的loading图片写入src，作为加载中的图片款式。
<img src="loading.gif" data-src="...image url" />其次，是肯定推断图片加载的机遇，即当图片进入阅读器的可视地区中时。那末题目来了，怎样推断某个元素进入可视地区呢？
以垂直方向为例，推断元素是不是进入可视区，起首我们须要晓得：
可视地区的高度：window.innerHeight（IE9之前不可用）|| document.documentElement.clientHeight (IE范例情势)；
元素相干于可视地区顶端位置：element.getBoundingClientRect().top；
元素相干于可视地区底端位置：element.getBoundingClientRect().bottom；
推断是不是进入可视区，即<u>推断元素的顶部相干于可视地区顶端位置是不是大于0，且又小于可视地区高度；或许，元素的底部相干于可视地区底端位置是不是大于0，且又小于可视地区高度</u>。
上图中列出了元素进入可视区的一切情况，从上到下来看，第一个元素的top与bottom的值都小于0，不在可视区内；第二个元素的top小于0，而bottom却在0到clientHeight之间，已在可视区内，须要加载；第三个元素的top与bottom都满足前提，在可视区中；剩下的两个元素与头两元素状况一致。
比及元素进入可视地区，就将img元素的’data-src’属性赋值给’src’属性，并标记该img元素正在加载，不再做此处置惩罚。
以上历程伪代码以下：
function check() {
imgs.forEach(function(img, index) {
if (loadedList.indexOf(index) >= 0) {
return;
}
if (!isInClient(container)) {
return;
}
loadedList.push(index);
loadImage(img);
})
}
末了，将推断图片进入可视地区后加载的check函数，<u>写入window的scroll和resize事宜即可</u>。
优化思绪
偶然用户若只想检察排序较后的图片，会疾速转动转动条，这类状况下疾速转动过的图片也没有必要加载了。
该优化的完成思绪也很简单，<u>耽误加载逻辑，计时器一到再推断元素是不是还在可视地区</u>，可将代码修正成以下：
function check() {
imgs.forEach(function(img, index) {
if (loadedList.indexOf(index) >= 0) {
return;
}
if (!isInClient(container)) {
return;
}
setTimeout(function() {
if (!isInClient(container)) {
return;
}
loadedList.push(index)
loadImage(img)
}, 1000);
})
}加载中状况
图片出于加载中的状况时，须要给用户“图片正在加载”的提醒，图片加载完成后，将提醒隐蔽。下面，本文将给出加载中提醒的两种完成计划。
计划一：应用img元素background
此计划的完成思绪是：<u>将“加载中”提醒作为img的背景，当图片正在加载中时，页面显现的是背景；图片加载完成，则掩盖了背景显现出图片</u>。
症结代码：
<img class="img" src="...">
.img {
width: 500px;
height: 300px;
background: url('data:image/gif;base64,...') center no-repeat;
}这里将“加载中”的动态图片作为img标签的background，而且转换base64编码，如许能够削减一次要求。
阅读器兼容状况见下表：
| 阅读器 | Chrome 54 | Safari 10.0 | Firefox 50.0 | IE 8 |
|---|---|---|---|---|
| 兼容性 | √ | √ | √ | √ |
兼容性没有题目，唯一的限定是须要设定.img的宽高。若事前没法获得图片的宽高，则能够在img标签外衣一层<div class="img">，由外层容器的background作为“加载中”提醒，容器中的img可依据容器的宽或高设定其大小，症结代码以下：
<div class="img">
<img src="...">
</div>
img {
height: 100%;
}计划二：应用img元素的load事宜
<u>img元素的load事宜会在图片加载完成后触发</u>，所以我们能够应用这一特性，举行加载中提醒。
完成思绪：<u>初次衬着img元素时，将“加载中”提醒作为img元素，真正的图片则用另一个Image对象加载。比及真正的图片加载完成，即触发了Image对象的load事宜，则将img元素的src修正成真正图片的url</u>。
症结代码以下：
Array.from(document.getElementsByTagName('img')).forEach(img => {
const image = new Image();
image.src = img.dataset.src;
image.onload = () => img.src = image.src;
})这类要领须要js合营，无论是加载中的提醒动画照样图片都能够原始尺寸展现，而不须要再设置。
兼容性也毫无题目：
| 阅读器 | Chrome 54 | Safari 10.0 | Firefox 50.0 | IE 8 |
|---|---|---|---|---|
| 兼容性 | √ | √ | √ | √ |
上面引见的两种计划都能完成“加载中”提醒，计划一只须要CSS即可，计划二须要js合营但灵活性更强。
加载中的动画不仅能够用图片，还能够用CSS3的动画特征，关于以上两种计划稍作修正也能够适配CSS3的加载中动画提醒：
计划一：加载动画作为外层div的内容，但z-index比图片低，等图片加载完即可掩盖；
计划二：用js掌握img和加载中动画的显现与隐蔽即可，图片加载完隐蔽加载中动画，显现图片，并可设置过渡动画加强体验；
加载完毕
图片加载完毕具有两种效果，要么加载胜利，要么失利。加载胜利，我们不需多做处置惩罚，而加载失利会涌现丢脸的裂图提醒，影响体验。
本文引见两种要领，替代图片加载失利的裂图提醒。
计划一：:before与:after伪元素
img是可替代元素，即其表现的情势与内容是被外部资本掌握。当img未加载时，属于它的:before与:after伪元素并未衬着，只要当图片加载失利时，这两个伪元素才会涌现。
这里给出加载失利的款式例子，CSS症结款式以下：
.broken-image {
width: 100%;
position: relative;
min-height: 50px;
}
.broken-image:before {
content: " ";
position: absolute;
top: -10px;
left: 0;
height: calc(100% + 10px);
width: 100%;
background-color: rgb(230, 230, 230);
border: 2px dotted rgb(200, 200, 200);
border-radius: 5px;
}
.broken-image:after {
content: "\f127" " Broken Image ";
display: block;
font-size: 16px;
font-style: normal;
font-family: FontAwesome;
color: rgb(100, 100, 100);
position: absolute;
top: 5px;
left: 0;
width: 100%;
text-align: center;
line-height: 2;
}由于衬着后:before和:after伪元素位于img元素里，故将img元素设为relative，:before作为背景，相对定位掩盖默许裂图提醒，:after作为提醒笔墨居中在img元素中。
<u>这类要领完成很轻易，而且款式可控，然则兼容性着实太差</u>，只要Chrome支撑，其他阅读器都没法在图片加载失利后衬着出:before和:after伪元素。
翻了翻范例 https://www.w3.org/TR/CSS22/g…
This specification does not fully define the interaction of :before and :after with replaced elements (such as IMG in HTML). This will be defined in more detail in a future specification.
所以，替代元素的:before、:after伪元素由阅读器产商本身完成，兼容性以下：
| 阅读器 | Chrome 54 | Safari 10.0 | Firefox 50.0 | IE 8 |
|---|---|---|---|---|
| 兼容性 | √ | ✘ | ✘ | ✘ |
计划二：应用img元素的error事宜
与加载胜利事宜load类似，<u>加载失利也会触发对应的事宜——error</u>。我们能够应用error事宜，当加载失利时替代img的src为加载失利提醒图的url。
症结代码以下：
Array.from(document.getElementsByTagName('img')).forEach(img => {
img.onerror = () => {
img.onerror = null;
img.src = 'data:image/gif;base64...';
}
});个中<u>error相应事宜中要记得将img的onerror属性置null</u>，不然一旦加载失利提醒图也加载失利时会堕入死循环。
该计划能够支撑当前主流阅读器：
| 阅读器 | Chrome 54 | Safari 10.0 | Firefox 50.0 | IE 8 |
|---|---|---|---|---|
| 兼容性 | √ | √ | √ | √ |
以上两种替代图片加载失利裂图提醒的计划，第一种因兼容性的关联只能用于特殊状况，第二种计划须要js合营，但无兼容性题目。
