級聯/拼接提高加載時間

所以，這是常見的做法，這幾天，來連接&縮小我們的網絡應用資源，像css & javascript。幾乎所有的技術堆棧都提供了這樣的工具。級聯/拼接提高加載時間

我想知道的是，如果有一種方法來連接我的所有圖像資源。我敢肯定，這會加快我的圖像重量網站的速度。

我知道這是如何手動實現的（想想在PS中拼接圖像）。我也知道可以自動執行此操作的算法。

我的問題是：

這已經成爲標準的做法嗎？
有沒有工具可以做到這一點？
這將真正有利於加快網頁的加載（通過同樣的邏輯，我想，這肯定是應該的。

來源

2016-03-01 Code Poet

Google for CSS Sprites。通常將所有圖像/圖標放在一個文件中，然後使用css顯示所需的圖像。唯一的缺點是圖像都是背景圖像。 – jeff

是的。這其實是一個很老的做法可以追溯到前遠網絡程序員已經這麼做了很多年，
是的，例如：http://spritegen.website-performance.org/
是的，因爲沒有太多的數據請求瀏覽器需要做。數據負載相同，但請求和響應的數量減少。

來源

2016-03-01 00:06:12 kemiller2002

有很多方法可以做到這一點，這對我來說最適合。 CSS。名稱此styles.css的

*, html { font-family:Arial, Helvetica, sans-serif; } 

    body, form, ul, li, p, h1, h2, h3, h4, h5 
    { 
     margin: 0; 
     padding: 0; 
    } 
    body { background-color: #606061; color: #ffffff; } 
    img { border: none; } 
    p 
    { 
     font-size: 1em; 
     margin: 0 0 1em 0; 
    } 

    /* CSS image preload styles */ 
    body:after 
    { 
     content: url(img/img01.png) url(img/img02.png) url(img/img03.png) url(img/img04.png) url(img/img05.png) 
    }

然後在HTML <head>地址：

<head> 

     <link rel="stylesheet" type="text/css" href="styles.css" media="screen" /> 
     <title>Preload Images</title> 

    </head>

這應該載入漂亮quick.If不會讓你的圖片文件更小。

來源

2016-03-01 00:42:26 JSJunkie

級聯/拼接提高加載時間

回答

相關問題