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; 
     } 
    } 
}