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的值为{{{}} 1}}然后图像应从mobile文件夹加载。

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

如果可能的话，建议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";

是你的意思吗？

PHP / JavaScript动态更改图像路径

3 个答案: