jQuery中的圖片替換

Question

我無法讓它做我想做的事！我試圖用移動瀏覽器的較小圖片替換大圖片。

下面是代碼：

function js_imgs() { 
    if (document.documentElement.clientWidth <= 600) { 
     $("img").each(function(){ 
      if ($(this).hasClass('big')) { 
       var preSrc = $(this).attr('src'); 
       var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.')); 
       $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(preSrc)); 
       $(this).removeClass('big').addClass('mobile'); 
      } 
     }); 
    } else { 
     $("img").each(function(){ 
      if ($(this).hasClass('mobile')) { 
       var preSrc = $(this).attr('src'); 
       var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.')); 
       $(this).attr('src', newSrc + '.' + /[^.]+$/.exec(preSrc)); 
       $(this).removeClass('mobile').addClass('big'); 
      } 
     }); 
    } 
}; 

對於第一個圖像，此代碼的工作順順當當。不幸的是，所有其他圖像都將其SRC重寫爲第一張圖像的SRC。他們都變成了同樣的形象;它調整大小奇妙，但不是正確的形象。

我做錯了什麼？我已經嘗試了幾乎所有的this thread這個變化，但沒有成功。

Answer 1

離家休息，然後回來，發現我一直在測試我的代碼，通過刷新和刷新服務器上的過期副本而不是我在本地主機上編輯的副本。

對不起！我一直工作太久。

下面是代碼的工作版本：

function js_imgs() { 
    if (document.documentElement.clientWidth <= 600) { 
     $("img").each(function(){ 
      if ($(this).hasClass('big')) { 
       var oldSrc = $(this).attr('src'); 
       var newSrc = oldSrc.substring(0, oldSrc.lastIndexOf('/')) + oldSrc.substring(oldSrc.lastIndexOf('/'), oldSrc.lastIndexOf('.')); 
       $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(oldSrc)); 
       $(this).removeClass('big').addClass('mobile'); 
      } 
     }); 
    } else { 
     $("img").each(function(){ 
      if ($(this).hasClass('mobile')) { 
       var oldSrc = $(this).attr('src'); 
       var newSrc = oldSrc.substring(0, oldSrc.lastIndexOf('/')) + oldSrc.substring(oldSrc.lastIndexOf('/'), oldSrc.lastIndexOf('.')); 
       $(this).attr('src', newSrc.replace(/([^.]*)-m/, "$1") + '.' + /[^.]+$/.exec(oldSrc)); 
       $(this).removeClass('mobile').addClass('big'); 
      } 
     }); 
    } 
}; 

js_imgs(); 

$(window).resize(function($){ 
    js_imgs(); 
}); 

上窗口調整大小，這幾乎一定是完全不必要這是用於在即時切換寫入。也許在高分辨率iPhone或平板電腦上從縱向切換到橫向時，額外的代碼可能是值得的;我將不得不做一些測試。

改進和評論的動態切換值得歡迎。

Answer 2

首先我會簡化功能，不值得去驗證你是否在手機上，因爲你第一次進入這個頁面，它會驗證它是否足夠大。

這將是這樣的：

function js_imgs() { 
    if (document.documentElement.clientWidth <= 600) { 
     $("img").each(function(){ 
      if ($(this).hasClass('big')) { 
       var preSrc = $(this).attr('src'); 
       var newSrc = preSrc.substring(preSrc.lastIndexOf('/'), preSrc.lastIndexOf('.')); 
       $(this).attr('src', newSrc + '-m.' + /[^.]+$/.exec(preSrc)); 
       $(this).removeClass('big').addClass('mobile'); 
      } 
     }); 
}; 

儘管如此，這項工作可以做在服務器端更好的，有在不同的服務器語言（asp.net，PHP的...）一個夢幻般的腳本來檢測是否它是一個移動：

detectmobilebrowser.com/

另一件事，我不太清楚，如果寬度（600）太大了，我woulld有使用350像素，嘗試在移動的Facebook，它適用於這些尺寸。