5

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

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

移动设备、平板电脑和台式机。

我的网站是用 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 解决方案在 PHP 中执行此操作。

否则，请建议一个普通的 JavaScript解决方案（没有像 jQuery、MooTools 这样的库）

谢谢

更新

实际上我使用 Joomla 作为 CMS，所以在我的帖子中我不能在帖子中使用 PHP 代码，因此我希望在呈现页面之后或在呈现过程中这些路径必须更改。

4

3 回答 3

4 
$(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">
于 2012-05-06T14:26:15.577 回答
1

试试这个：

<img src="cdn/images/<?php echo $layout; ?>image3.jpg" width="500" height="200" alt="image3">
于 2012-05-06T13:43:02.947 回答
-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";

你是这个意思吗 ？

于 2012-05-06T14:07:52.863 回答