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

under Notes of Programming  tag     Published on April 3rd , 2020 at 06:25 pm

基本原理就是分成两层图片叠加,上层是小体积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


本文由 matcha 创作,采用 知识共享署名4.0 国际许可协议进行许可,转载前请务必署名
  文章最后更新时间为:April 3rd , 2020 at 12:22 pm
分享到:Twitter  Weibo  Facebook