論網速快慢的區別

提示：當你看到這個提示的時候，說明當前的文章是由原emlog博客系統搬遷至此的，文章發布時間已過於久遠，編排和內容不一定完整，還請諒解`

論網速快慢的區別

日期：2020-11-7 阿珏 HTML 瀏覽：931 次評論：6 條

論網速快慢的區別

隨著網絡的普及，用戶對響應速度快慢越來越重視了，網站越快，用戶的黏性和轉化率也會越高。

簡單來說，就是要提高速度！影響網站速度的因素有很多，比如......................

一本正經可不是我的風格，下面請看我的表演

想法起源#

一開始的想法是使用純css進行實現，把底圖base64編碼後直接放在background-image上，就可以達到背景圖片於網頁一同加載出來的效果

第一步：#

首先將提前準備好的素材圖片進行處理，拔下泳衣和泳裙

第二步：#

新建個 HTML 文件

第三步：#

<div class="裸體">
    <div class="泳衣" id="泳衣"></div>
    <div class="泳裙" id="泳裙"></div>
</div>

完成。。

然後就發現個問題，由於我的底圖文件大小達到了 12 兆，編碼後的字符串過大，導致網頁加載又卡又慢，實在無用戶體驗
而且這種方式加載的底圖會突然的顯示出來，過於唐突，效果不好

後改用：#

css+JavaScript 進行實現，由 background-image 直接加載背景圖片，能達到逐漸顯示的效果，待底圖加載完畢後再由 js 動態插入配圖

window.onload = function(){
    var img=new Image();
    img.src='裸體.jpg';
    if(img.width==0){
        alert('圖片加載失敗')
    }else{
        document.getElementById("泳衣").style.backgroundImage="url(泳衣.png)";
        document.getElementById("泳裙").style.backgroundImage="url(泳裙.png)";
    }
}