在onload之后修改页面上没有id的所有图像(src)

时间:2015-02-05 13:57:34

标签: javascript

我放弃了找到一个让我高兴的crossbrowser图像解决方案。 我现在想把它变成带宽为destkops的成本的“移动优先”方式。

计划:将移动大小的图像发送给所有客户。 然后我能够获得浏览器的视口大小工作正常。 我的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属性的扩展名?当检测到视口宽度&gt; = 1001时,我想用“-normal.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);
}

2 个答案:

答案 0 :(得分:0)

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

答案 1 :(得分:0)

我不认为这是最好的方法,但它确实改变了图像路径,但这也适用于窗口调整大小。如果其他开发人员想要编辑它来清理它或改进某些东西,那么请随意这样做。

检测用户设备而不是使用浏览器高度/宽度会不会更好?

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;