0

我正在使用 WordPress 和 phpBB 开发一个站点，您必须知道图像路径是由这些 CMS 生成的。我想要的是............在发送到浏览器之前保留输出............根据设备类型更改图像路径，最后输出正确的图像。

为什么要替换路径？

因为我的 NORMAL 图像是 180KB，我的 MEDIUM 图像是 90KB，我的 SMALL 图像是 30KB，像这样在每页上大约有 20 个图像，想象一下通过用较小的图像替换它来降低页面速度，用于小型和慢速设备. 还裁剪图像以仅突出显示较小设备的重要部分，因此更改尺寸不会解决我的问题。

我也不是在寻找 CSS3 媒体查询，因为我有不使用它们的特定原因。

什么对我有用？

由于我的首要任务是尽量减少页面加载时间，因此最好的解决方案是使用一些正则表达式，因为我没有在我的模板中使用任何 JavaScript 库。

如果没有 JavaScript 就无法实现这一点，那么我更喜欢不使用任何库的普通旧 JavaScript 方法，因为这将是我模板中唯一的 JavaScript 函数，为它加载整个库没有任何意义。

以下是我当时的事情应该是的做法。但是我不知道如何获得它。请帮忙。

请注意：-我对 PHP 非常陌生，在 Regex 和 JavaScript 上也是零。因此，请详细解释一下。

<?php ob_start (); ?> /* Start Buffering */


<div>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque vestibulum fringilla. Nullam eget fermentum neque. Quisque ullamcorper fringilla quam, eu elementum nisl ornare vitae.</p>
<img src="images/desktop/pic1.jpg"/>
<img src="images/desktop/pic2.jpg"/>
<img src="images/desktop/pic3.jpg"/>
</div>

<?php ob_get_contents();  /* Get the Buffer */

if ($layout = 'mobile') {

    /* replace <img src="images/desktop/pic1.jpg"/> with <img src="images/mobile/pic1.jpg"/>
    /* replace <img src="images/desktop/pic2.jpg"/> with <img src="images/mobile/pic2.jpg"/>
    /* replace <img src="images/desktop/pic3.jpg"/> with <img src="images/mobile/pic3.jpg"/>
    The Folder-Name 'desktop' should be replaced by 'mobile'
    */

} else if ($layout = 'tablet') {

    /* replace <img src="images/desktop/pic1.jpg"/> with <img src="images/tablet/pic1.jpg"/>
    /* replace <img src="images/desktop/pic2.jpg"/> with <img src="images/tablet/pic2.jpg"/>
    /* replace <img src="images/desktop/pic3.jpg"/> with <img src="images/tablet/pic3.jpg"/>
    The Folder-Name 'desktop' should be replaced by 'tablet'
    */

}

ob_end_flush (); /* Send Output to the browser */
?>

$layout 的值由另一个 PHP 函数计算。

如果您认为这会是更好的方法，请随时提出完全不同的解决方案。

4

1 回答 1

0

您想要将路径中的“桌面”一词替换为“移动设备”或“平板电脑”。您不需要正则表达式。

我打算建议使用，但后来str_replace我意识到你甚至不需要那个。

试穿这个尺寸：

<?php ob_start (); ?> /* Start Buffering */
<div>
    <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc pellentesque vestibulum fringilla. Nullam eget fermentum neque. Quisque ullamcorper fringilla quam, eu elementum nisl ornare vitae.
    </p>
    <img src="images/<?=($layout !== 'desktop' ? $layout : 'desktop')?>/pic1.jpg"/>
    <img src="images/<?=($layout !== 'desktop' ? $layout : 'desktop')?>/pic2.jpg"/>
    <img src="images/<?=($layout !== 'desktop' ? $layout : 'desktop')?>/pic3.jpg"/>
</div>
?>

奇怪的是，如果总是设置布局（即通常是“桌面”，或者“移动”或“平板电脑”），为什么你甚至需要替换 url？您可以像这样动态构造 url：

<img src="images/<?=$layout?>/pic1.jpg"/>
于 2012-11-18T03:04:19.263 回答