PHP/JavaScript动态更改图像路径

Question

这是我的第一个问题,因此请忽略错误,如果有的话.

我有一个问题,我根据他们浏览的设备为我的访问者提供三种备用布局.

手机,平板电脑和桌面.

我的网站是用PHP编写的,我只使用280字节的JavaScript来确定访问者的浏览器宽度.没有其他JavaScript或任何库,如jQuery,MooTools.我想保持我的网站非常轻的重量,从而导致更快的页面加载速度.

我有一个调用的PHP变量$layout,它的值由JavaScript根据浏览器宽度动态分配.分配给它的三个值是mobile or tablet or desktop

现在我在我的xhtml中有链接,如下所示:

<img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
<img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
<img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">

默认情况下,图像从cdn/images/desktop文件夹加载.

我正在寻找的是,如果值是$layout,tablet那么图像应该从cdn/images/tablet文件夹加载,类似地,如果$layout是,mobile那么图像应该从cdn/images/mobile文件夹加载 .

图像名称保持不变.它们是三种不同文件夹中的三种不同分辨率.

如果可能的话,请建议使用PHP解决方案.

否则请建议一个简单的JavaScript解决方案(没有像jQuery,MooTools等任何库)

谢谢

UPDATE

实际上我使用Joomla作为CMS,所以在我的帖子中我不能在帖子中使用PHP代码因此我希望在页面渲染之后或在渲染期间这些路径必须改变.

Answer 1

$(function(){
        //mobile or tablet or desktop
        var client='<?php echo $layout; ?>'
        if(client=='desktop'){
            //do nothing
        }else if(client=='tablet'){
            $('#image-list img').each(function(){
                $('this').attr('src',$(this).attr('src').replace('desktop','tablet'));  
            });
        }else{
            //mobile
            $('#image-list img').each(function(){
                $('this').attr('src',$(this).attr('src').replace('desktop','mobile'));  
            });
        }
    });

        <div id="image-list">
        <img src="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">
        <img src="cdn/images/desktop/image2.jpg" width="500" height="200" alt="image2">
        <img src="cdn/images/desktop/image3.jpg" width="500" height="200" alt="image3">
    </div>

使用 jQuery

抱歉，我不知道它不需要 lib。

    var client='<?php echo $layout; ?>'
    var list=document.getElementById('image-list');
    var img=list.getElementsByTagName('img');
    for(var i=0;i<img.length;i++){
        //img[i].src=img[i].src.replace('desktop',client);
        img[i].setAttribute('src',img[i].getAttribute('src-data').replace('desktop',client));
    }

将其放在文件末尾。

<img src-data="cdn/images/desktop/image1.jpg" width="500" height="200" alt="image1">