网页上常常会有体积比较大的图片，特别影响网页加载速度。今天我们就结合一款加速插件Antimoderate.js。原理是通过html5的canvans将图片做了处理，优先加载缩略图，并做模糊化，当大图下载完成时加载大图显示，这样极大的加快了网页打开速度。
我们使用的解决办法是先加载一张很小的缩略图，它可能只有1K左右，并且按所需尺寸模糊显示，等到大尺寸图片下载好再完整显示大图。这样给用户的感觉是先加载模糊的图片，然后再是变清晰的图片，图片加载过程流畅，极大的提高用户体验。
准备材料
我们准备一张大图，当然它尽可能的大，可能几百KB，甚至上MB。我们同时还制作一张缩略图，非常小，可能就1kb左右，我们可以将这张缩略图转换成Base64的图片，如下代码中，将data-antimoderate-idata属性值定义为base64图片。
js
在不做js处理时，我们还是会看到一张慢慢从上到下加载的大图。非常幸运的是，antimoderate.js帮我们处理加载的问题，看如何使用它。
<script src="antimoderate.min.js"></script>
<script>
var img = document.getElementById('pic');
AntiModerate.process(img, img.getAttribute("data-antimoderate-idata"));
</script>
