HTML大型图片载入的优化笔记 PNG交错&DIV重叠

基本原理就是分成两层图片叠加，上层是小体积PNG的图标和文字，底层是大体积的PNG背景，两层PNG都采用交错格式报错，就是图片会先载入成马赛克然后再逐步清晰，然后由于上层的体积较小所以优先载入出来配合还尚未载入完成的背景直接呈现，然后就能达到文字清晰，背景逐步清晰的效果。

<div style="position: relative">
<div style="position: absolute">
<div style="position: absolute; opacity: 0.0">
<img
style="background-color: RGB(252,150,123,0)"
id="MCcard" src="http://www.matce.cn/i/usr/uploads/about/MCcard.png"
title="Matcha's Card">
</div>
<img src="http://www.matce.cn/i/usr/uploads/about/MCcardText.png"
style="background-color: RGB(252,150,123,0)"
id="MCcardText"
title="Matcha's Card Texts & Signs">
</div>
<img src="http://www.matce.cn/i/usr/uploads/about/MCcardBG.png" style="background-color: RGB(252,150,123)"
id="MCcardBG"
title="Matcha's Card Background">
</div>

<!--script>
document.getElementById('MCcardText').onload = function(){
document.getElementById('MCcard').src="http://www.matce.cn/i/usr/uploads/about/MCcard.png"
};
</script>-->

备注http://www.360doc.com/content/15/1226/21/29747475_523326992.shtml
https://blog.csdn.net/kouwoo/article/details/49806293