PHP / JavaScript 动态改变图像路径

Question

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

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

手机、平板电脑和台式机。

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

我有一个名为$layout 的PHP 变量，它的值由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，那么图像应该从@987654330 加载@文件夹。

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

如果可能的话，请建议一个 PHP 解决方案以在 PHP 中执行此操作。

否则，请提出一个纯 JavaScript 解决方案（没有像 jQuery、MooTools 之类的库）

谢谢

更新

实际上我使用 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">

---

Answer 2

试试这个：

<img src="cdn/images/<?php echo $layout; ?>image3.jpg" width="500" height="200" alt="image3">

Answer 3

为什么不使用简单的 javascript 来更改图像的 src 呢？ 它可能不是最好看的脚本，但你可以这样做：

xhtml 文件：

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

在 javascript 找出它只是做的布局之后：

document.getElementById("image1").src = "cdn/images/" + layout + "/image1.jpg";
document.getElementById("image2").src = "cdn/images/" + layout + "/image2.jpg";
document.getElementById("image3").src = "cdn/images/" + layout + "/image3.jpg";

你是这个意思吗？