網站優化之路---圖片優化，圖片從模糊到清晰

zhkai 發布于2019-08-01 17:45 / 1979人閱讀

摘要：到圖片完全出來時候顯示大圖，同時模糊到清晰當然了，如果想要更好的效果，要配合圖片懶加載，就是當滾輪滾動到特定位置在加載圖片，這篇文章重點是將第二種解決方案，圖片從模糊到清晰，廢話不多說，上代碼圖片從模糊到清晰部分部分部分

前言

作為一個有追求有信仰的程序員，做一個網站絕不是僅僅能用就行了，當我們實現功能后，或者在寫代碼的過程中就要考慮怎么去優化，一個網站要去優化，作為前端要考慮的是資源優化（減少 http 請求啊，固定圖片壓縮啊，精靈圖合并啊，或者使用圖標字體啊），安全問題（代碼壓縮丑化，存儲 cookie 或者storage 時候加密啊），還有性能優化，資源優化的重中之重就是圖片的優化，加載圖片是很耗費資源的。正常情況下，當圖片沒有加載過來的時候，如果沒有外層標簽限制高度，會沒有圖片的位置，圖片資源加載過來之后，開始下載，如果圖片夠大，圖片會從頭到尾慢慢顯示，給人非常不舒服的感覺。

解決方案

圖片的優化其實現在有兩種解決方案：

先顯示一張背景圖，到圖片加載過來時候顯示加載圖片

先加載圖片的縮略圖，然后模糊，縮略圖非常小，結合模糊效果，可以比純色更好的占位符，而不會犧牲有效載荷。到圖片完全出來時候顯示大圖，同時模糊到清晰

當然了，如果想要更好的效果，要配合圖片懶加載，就是當滾輪滾動到特定位置在加載圖片，這篇文章重點是將第二種解決方案，圖片從模糊到清晰，廢話不多說，上代碼

圖片從模糊到清晰

html部分

css部分

figure .image-wrap {
    width: 500px;
    height: 312px;
    position: relative;
    overflow: hidden;
}
figure .image-wrap .oldImage {
    width: 100%;
    -webkit-filter: blur(10px);
    transition: all 0.5s
}

js部分

var image = document.querySelector(".oldImage"),
    imageParentDom = image.parentNode,
    src = image.dataset.src;
var newImage = document.createElement("img");
newImage.src = src;
newImage.style.cssText = "position: absolute;left:0;top:0;width:100%;z-index:-1";
newImage.onload = function () {
    imageParentDom.appendChild(newImage);
    setTimeout(() => {
        imageParentDom.removeChild(image);
    },500)
}

云服務器 GPU云服務器圖片優化 cdn圖片優化圖片不清晰 js使圖片變清晰了

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/51350.html

網站優化之路---圖片優化，圖片從模糊到清晰

摘要：到圖片完全出來時候顯示大圖，同時模糊到清晰當然了，如果想要更好的效果，要配合圖片懶加載，就是當滾輪滾動到特定位置在加載圖片，這篇文章重點是將第二種解決方案，圖片從模糊到清晰，廢話不多說，上代碼圖片從模糊到清晰部分部分部分前言作為一個有追求有信仰的程序員，做一個網站絕不是僅僅能用就行了，當我們實現功能后，或者在寫代碼的過程中就要考慮怎么去優化，一個網站要去優化，作為前端要考慮的是資源...

stackvoid 2019-08-30 13:46 評論0 收藏0
網站優化之路---圖片優化，圖片從模糊到清晰

摘要：到圖片完全出來時候顯示大圖，同時模糊到清晰當然了，如果想要更好的效果，要配合圖片懶加載，就是當滾輪滾動到特定位置在加載圖片，這篇文章重點是將第二種解決方案，圖片從模糊到清晰，廢話不多說，上代碼圖片從模糊到清晰部分部分部分前言作為一個有追求有信仰的程序員，做一個網站絕不是僅僅能用就行了，當我們實現功能后，或者在寫代碼的過程中就要考慮怎么去優化，一個網站要去優化，作為前端要考慮的是資源...

1fe1se 2019-08-21 17:02 評論0 收藏0
前端性能優化之路——圖片篇。

摘要：判斷為白名單，則直接調用，返回格式圖片反之，則顯示原圖。處理處理，是美團云為美團主站提供的處理方式。目前，可用替換路徑的方式來處理。處理實際上效果也是不錯的，美團頁面里以上的圖片都是懶加載的，基本上都可以滿足需求。本人是一名前端開發者，在公司負責目前負責信息流服務，為五大手機廠商和各大App提供服務，每天的請求就是以億計算，加上我們又做了SSP和DSP，就是類似于百度廣告聯盟，騰訊廣...

wfc_666 2019-08-22 15:09 評論0 收藏0
談談Web應用中的圖片優化技巧及反思

摘要：要注意老舊的瀏覽器不支持的特性，它會繼續正常加載屬性引用的圖像。五安全地使用圖片的優勢這里不再贅述，簡單來說這篇文章，我們將一起探討，web應用中能對圖片進行什么樣的優化，以及反思一些負優化手段一、為什么要對圖片進行優化對于大多數前端工程師來說，圖片就是UI設計師(或者自己)切好的圖，你要做的只是把圖片丟進項目中，然后用以鏈接的方式呈現在頁面上，而且我們也經常把精力放在項目的打包...

zone 2019-08-26 10:43 評論0 收藏0