2014-01-23 51 views
0

我一個網站,有圖像塊,各種尺寸的工作jQuery的設置圖片src(基於父母的電流大小相對寬度,父母也有相對大小窗口)。我使用jquery load事件改寫基於圖像對象的動態尺寸圖像的src屬性,保證像素完美的看法。問題在於瀏覽器下載完整大小的圖像,而不是用動態生成的圖像替換它。這導致不必要的負載和速度損失。與負載

如果我讓src值空的,添加正確的網址呢?我想保持seo優化,所以空的src可能不是一個好主意。如果沒有雙重下載圖像,我可以實現嗎?也許我應該在瀏覽器開始下載src數據之前使用一個事件。

我的代碼:

$('.image').load(function() { 
    if (!$(this).hasClass('optimized')) { 
     $(this).attr('src', '/image-perfection.php?image=' + encodeURIComponent($(this).attr('src')) + '&width=' + $(this).width()); 
     $(this).addClass('optimized'); 
    } 
}); 
+0

但我無法檢測到服務器端的窗口大小,我不希望使用重定向第一負載。我能以某種方式做到這一點,而無需重定向? –

+0

你能幫助我如何檢測服務器端的窗口大小嗎? –

+0

我在我的服務器上使用PHP。 –

回答

1

創建一個小的縮略圖,讓你的圖像指向同一個縮略圖。

這樣做的好處是,你可以指定一個「裝」一樣的圖像會被瀏覽器預逮住明年請求,然後您可以加載圖片你的方式。

您也可以編寫削減服務器中的映像爲您代理腳本,如果你與你可以減少他們一旦他們上傳了優化工藝上傳的圖片的工作,當然這取決於如何你必須執行。

+0

但是,如果搜索引擎抓取我的網站,他們會看到縮略圖作爲圖像數據,這不利於我的網站的搜索引擎優化,是嗎? –

+0

延長埃德加的回答您的問題,而不是加載適用於所有的單個縮略圖,你總是可以先加載圖像的「移動」的大小和交換出來,如果你需要加載 – Jason

+0

是的,這是我的第一個想法之後,但我有很多圖片,以及很多http請求使用這種技術。 –