在請求發送之前更改圖像的src

我對這個問題做了很多研究，但沒有成功。基本上就是我想要做的是這樣的：
1）用佔位符替換所有圖像的SRC-屬性，如「blank.gif」
2）與原始圖像位置添加HTML5數據屬性決定
3）Lazyload圖像（它需要的數據，原始屬性才能正常工作）

我試了一下沒有成功：
1）附加此事件偵聽document.addEventListener('beforeload', doBeforeLoad, true);
使用此功能
在請求發送之前更改圖像的src

function beforeload() { 
     var blank = 'image/location/images/blank.gif'; 
     $('img').each(function() { 
      var orig = $(this).attr('src'); 
      $(this).attr('data-original',orig); 
      $(this).attr('src',blank); 
      console.log("changing all data on images"); 
     }); 
    }

2）上的document.ready肯定它會不會工作。

我不知道如果這甚至有可能，所以任何幫助|建議|資源將不勝感激
PS：例如我想使它工作here）（因爲它是一個圖像重的文章）

來源

2013-01-19 christian_fei

來不及停止使用JavaScript的請求，如果'img'標籤已經在html中。解析它們與服務器代碼做相同之前發送HTML – charlietfl

好吧，謝謝，認爲jquery可以管理此.. –

該技術曾被用於舊版瀏覽器，但現在現代瀏覽器不再以這種方式欺騙，所以你必須在服務器端做空白的src和數據源屬性，這裏是流行的jQuery懶惰加載插件主頁， http://www.appelsiini.net/projects/lazyload你打賭，他們做了很多的研究，寫這個

最新版本的延遲加載之前，是不是在更換到您的網頁下降。即使您使用JavaScript刪除src屬性，新瀏覽器也會加載圖像。現在你必須改變你的html代碼。將佔位符圖像放入您的img標籤的src屬性中。實際圖片網址應該存儲數據原始屬性。

UPD：只是覺得過了一下，以DATA-屬性可能更好的辦法是使用noscirpt包裝爲你想裝lazlily這裏粗略插圖想法http://jsbin.com/uqomeb/2/edit我可能會做一些簡單的jQuery插件，後來在此基礎上的圖像

來源

2013-01-19 14:03:24 dmi3y

aww的意思是，我希望有一個解決方法，但似乎我必須添加src和數據原創*手動*每個重文章:( –

謝謝你的方式:) –

我最近做了類似的工作，不幸的是回落與相同的結論，以防萬一你關心沒有JavaScript用戶回退標記可能是有用的，這裏是ref鏈接http://css-tricks.com/snippets/javascript/lazy-loading-images/ – dmi3y

瀏覽器將開始製作請求，然後才能開始執行您的JS。我建議您將源html改爲您需要用於延遲加載圖像的data模式。這需要在瀏覽器收到它之前發生。如果服務器生成，這應該不會太麻煩。

來源

2013-01-19 13:55:30

聽起來你正在尋找相當於增加img的東西，然而你通過修改圖像的想法來接近它。如果你使用佔位符span或類似的東西，那麼你可以避免整個問題，並考慮更少的變量。使用所需信息的數據集創建一個跨度，並選擇附加背景圖像的class以指示圖像尚未加載，然後在頁面加載時找到適當的span s插入img元素（或替換span如果是首選），並執行任何其他清理操作，例如刪除「加載」樣式class。這可以允許以不太可能處於不一致狀態的方式來構建頁面。

來源

2013-01-19 14:04:04

在請求發送之前更改圖像的src

回答

相關問題