為其提供不同的圖片。接下來我們就看一看如何利用該技術(shù)實現(xiàn)圖片自適應(yīng)。
?
設(shè)置自適應(yīng)圖片
實現(xiàn) Adaptive Images 解決方案需要 Apache 2、PHP 5.x 和 GD 庫，也就是說需要 Web 服務(wù)器端編程。首先，在其網(wǎng)站上下載.zip 文件開始配置：
?
解 壓文件，然后將其中的adaptive-images.php和.htaccess文件拷貝到網(wǎng)站的根目錄。如果你網(wǎng)站的根目錄下已經(jīng)有一 個.htaccess文件了，不要覆蓋它。參考下載包中的instructions.htm文件看看怎么做合適。接著在網(wǎng)站根目錄下創(chuàng)建一個名為 ai-cache 的文件夾。
?
用你最喜歡的 FTP 客戶端軟件設(shè)置該文件夾的權(quán)限為777。
?
然后把如下 JavaScript 代碼復(fù)制到每個需要自適應(yīng)圖片的網(wǎng)頁的頭部：
<script>document.cookie=’resolution=’+Math.max(screen.width,screen.height)+'; path=/';/script>
?
如果你沒有使用 HTML5（在下一章會改用 HTML5），想讓頁面通過標準驗證，則需要追加 type 屬性。所以 script 標簽應(yīng)如下所示：
<script type=”text/javascript”>document.cookie=’resolution=’+Math.maxscreen.width, screen.height)+'; path=/';</script>
?
切記這段 JavaScript 代碼要放在頁面頭部（ 好作為第一個腳本），因為它需要在頁面加載完成之前，而且要在發(fā)出圖片請求之前運行。下面是我們的示例網(wǎng)站頭部加入該腳本后的結(jié)果：
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
<meta name=”viewport” content=”width=device-width,initial-scale=1.0″ />
<title>And the winner isn’t…</title>
<script type=”text/javascript”>document.cookie=’resolution=’+Math. max(screen.width,screen.height)+'; path=/';</script> <link href=”css/main.css” rel=”stylesheet” type=”text/css” />
</head>
?
把背景圖片放在其他地方
過去，我通常將所有圖片都放在一個名如 images 或 img 的文件夾中，不論是用做 CSS 背景的圖片，還是通過標簽插入的圖片。但是在使用自適應(yīng)圖片方案時，建議將那些用于 CSS 的背景圖片（或者那些你不想被縮放的圖片）放在另一個目錄。自適應(yīng)圖片方案默認為此創(chuàng)建的目錄是assets。如果你不想縮放某張圖片，把它丟進這個文件 夾即可。如果你想將這類圖片存在其他（或更多）文件夾中，則需要像下面這樣修改.htaccess文件。
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images ——————————————————–
RewriteCond %{REQUEST_URI} !assets
RewriteCond %{REQUEST_URI} !bkg
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions
RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images —————————————————–
</IfModule>
?
上面的代碼設(shè)定了存在assets或bkg文件夾中的圖片不會被縮放。反之，如果你想顯式聲明只允許某個特定文件夾中的圖片被縮放，那么將設(shè)置規(guī)則中的感 嘆號去掉即可。例如，如果我只想讓網(wǎng)站根目錄下名為andthewinnerisnt的文件夾中的圖片被縮放，則修改后的代碼如下所示：
<IfModule mod_rewrite.c>
Options +FollowSymlinks
RewriteEngine On
# Adaptive-Images —————————————————— 2
RewriteCond %{REQUEST_URI} andthewinnerisnt
# Send any GIF, JPG, or PNG request that IS NOT stored inside one of the above directories
# to adaptive-images.php so we can select appropriately sized versions RewriteRule \.(?:jpe?g|gif|png)$ adaptive-images.php
# END Adaptive-Images ————————————————–
</IfModule>
?
這就是要設(shè)置的全部內(nèi)容。檢查是否能正確生成自適應(yīng)圖片的 簡單辦法，就是在網(wǎng)頁中插入一張大圖片，然后用手機訪問這個頁面。之后用 FTP 軟件檢查ai-cache文件夾中的內(nèi)容，你應(yīng)該可以看到一堆文件，以及使用屏幕尺寸斷點命名的文件夾，如480（如下圖）：
Adaptive Images 方案不僅限于靜態(tài)網(wǎng)站，它也可以被用于內(nèi)容管理系統(tǒng)，而且在 JavaScript 被禁用的情況下依然有效。自適應(yīng)圖片方案給我們提供了一種方法，可以根據(jù)屏幕尺寸提供完全不同的圖片，為那些沒有必要下載全尺寸大圖的設(shè)備節(jié)省帶寬。
?
原文： http://www.aaini.com/html/1093.html
?
Adaptive Images檢測訪問者屏幕的尺寸，自動創(chuàng)建、緩存并重新縮放內(nèi)嵌在HTML頁面中的圖片，以適應(yīng)顯示設(shè)備屏幕的大小。無需把變化標記出來。Adaptive Image和流媒體圖片技術(shù)聯(lián)合使用，適用于響應(yīng)式設(shè)計。
?
Adaptive Images為什么要那樣做？現(xiàn)在越來愈多的用戶使用屏幕更小、速度更慢和帶寬更低的設(shè)備訪問網(wǎng)站。在那樣的設(shè)備上訪問以桌面為中心的網(wǎng)站，圖片加載會越 來越慢，引起UI延遲，花費用戶更多的帶寬和金錢。Adaptive Images就是為了解決上述問題。
?
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號聯(lián)系： 360901061
您的支持是博主寫作最大的動力，如果您喜歡我的文章，感覺我的文章對您有幫助，請用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點擊下面給點支持吧，站長非常感激您！手機微信長按不能支付解決辦法：請將微信支付二維碼保存到相冊，切換到微信，然后點擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對您有幫助就好】元
