我放弃了找到一个让我高兴的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);
}
答案 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;