onload後在頁面上修改所有沒有標識的圖像（src）

Question

我放棄了找到一個交叉瀏覽器圖像解決方案，這讓我很開心。 我現在想讓它成爲帶走成本的「移動第一」方式。

計劃：向所有客戶發送手機尺寸的圖像。 然後我能夠得到瀏覽器的視口大小工作正常。 我的CSS切換如下：< = 1000 px手機視圖> = 1001桌面視圖。

但是：然後：我想我會將圖像保存在具有不同文件擴展名的相同路徑中。可以說，我將它們保存爲如下

/img/myimage-mobile.jpg 
/img/myimage-normal.jpg 
/img/myimage-highres.jpg 

初始加載看起來像

<img src="img/myimage-mobile.jpg" alt="#" /> 

現在我的問題：我怎樣才能得到所有的img標籤和更改src屬性的延伸？當檢測到視口寬度> = 1001時，我想用「-image.jpg」替換所有「-mobile.jpg」，用「myimage-highres.jpg」替換所有〜1400。

多數民衆贊成我走到這一步：

var w = Math.max(document.documentElement.clientWidth,  window.innerWidth || 0) 
var h = Math.max(document.documentElement.clientHeight, window.innerHeight || 0) 

獲得視口大小，然後我發現這個這是越來越整個src屬性：

var images = document.getElementsByTagName('img'); 
var srcList = []; 
for(var i = 0; i < images.length; i++) 
{ 
srcList.push(images[i].src); 
srcList.push(images[i].src); 
} 

Answer 1

我不認爲這是最好的方法，但它確實改變了圖像路徑，但這也將在窗口大小調整。如果其他開發者想編輯這個來清理它或者改進某些東西，那麼可以隨意這樣做。

檢測用戶設備而不是使用瀏覽器高度/寬度會更好嗎？

var defaultimg="normal"; 
function _Imgs(){ 
var imgsize; 
var Pw=document.documentElement.clientWidth; 
var Ph=document.documentElement.clientHeight; 
if(Pw<800||Ph<300){ // Change this to Set width for mobiles 
imgsize="mobile"; 
}else{ 
imgsize="normal"; 
} 
    var MyImgs=document.getElementsByTagName("IMG"); 
    for(var i=0; i<MyImgs.length; i++) { 
     MyImgs[i].setAttribute("src",MyImgs[i].src.replace(defaultimg, imgsize)); 
    } 
//Change variable value to allow toggle on window resize 
    defaultimg=imgsize; 
} 
window.onload=_Imgs; 
window.onresize=_Imgs; 

Answer 2

使用jQuery你可以做這樣的

$('img').each(function(){ 
    var fix = $(this).attr('src').replace('mobile', 'normal'); 
    $(this).attr('src', fix); 
}) 

要檢測的視口大小，你可以這樣做：

var height = window.innerHeight; 
var width = window.innerWidth; 

然後，只需做一個函數進行包裝，一起：

window.onload = function(){ 
    var height = window.innerHeight; 
    var width = window.innerWidth; 
    if(height < 1000 && width < 400){ 
     $('img').each(function(){ 
      var fix = $(this).attr('src').replace('mobile', 'normal'); 
      $(this).attr('src', fix); 
     }) 

    } 
} 

或純JavaScript：

window.onload = function(){ 
    var height = window.innerHeight; 
    var width = window.innerWidth; 
    if(height < 1000 && width < 400){ 
     var imgs = document.getElementsByTagName('img'); 
     for(i=0;i<imgs.length;i++){ 
      var fix = imgs[i].src.replace('mobile', 'normal'); 
      imgs.src = fix; 
     } 
    } 
}