加载后修改页面上所有没有id的图像(src）

Modifying all images (src) without id on page after onload

本文关键字：id 图像 src 有没有 修改 加载      更新时间：2023-09-26

我已经放弃了寻找一个让我很高兴的跨浏览器镜像解决方案。我现在想让它成为destkops带宽成本的"移动优先"方式。

计划：将移动大小的图像发送给所有客户。然后我可以得到浏览器的视口大小，这很好。我的CSS切换如下：<=1000像素移动视图>=1001桌面视图。

但后来：我想我会用不同的文件扩展名将图像保存在相同的路径中。假设我会将它们保存为以下

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

初始负载看起来像

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

现在我的问题是：如何获取所有img标记并更改src属性的扩展名？当检测到视口宽度>=1001时，我想将所有"-mobile.jpg"替换为"-normal.jpg"，将较大的~1400替换为"myimage highres.jpg"。

这就是我目前所得到的：

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

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

检测用户设备不是比使用浏览器的高度/宽度更好吗？

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;

使用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;
       }
    }
}
相关文章：