基于cookie及JavaScript的响应式图像

使用复杂的服务器端逻辑也能实现响应式图像。有时因为一些特殊的需求,开发者往往不能够采取最简单的方法来实现特定的目标。之前提到的基于宽度百分比的方法依赖于客户端来实现对于大图像文件的缩放。而本方法则是在服务器端依据客户的请求,返回恰当大小的图像文件。如果你正为网页加载过慢导致的网站性能问题而烦恼,也许该方法能够给不堪重负的服务器负载和网络带宽带来一些改进。

准备工作

本教程中所涉及的方法都需要在服务器端实现相应的功能。首先,服务器端需要提供PHP服务。其次,服务器端需要实现根据客户端的请求返回3张不同大小的图像的功能。

实现方式

下面的JavaScript代码比较简单,创建一个基于用户设备屏幕尺寸的cookie。当客户端请求服务器端的图像时,运行在服务器端的PHP服务便会依据该屏幕参数决定返回何种大小的图像。

<script >
  document.cookie = "screen_dimensions=" + screen.width screen.height;
</script>

回到服务器端,在相应的Web资源路径下创建名为images的文件夹,同时新建PHP文件(名为index.php),以下为相应的PHP代码:

<?php
$screen_w = 0;
$screen_h = 0;
$img = $_SERVER['QUERY_STRING'];

if (file_exists($img)) {
  // 通过COOKIE获取屏幕大小
  if (isset($_COOKIE['screen_dimensions'])) {
    $screen = explode('x', $_COOKIE['screen_dimensions']);
    if (count($screen) == 2) {
      $screen_w = intval($screen[0]);
      $screen_h = intval($screen[1]);
    }
  }
  if ($screen_width > 0) {
    $theExt = pathinfo($img, PATHINFO_EXTENSION);
    // 小屏幕解决方案
    if ($screen_width <= 800) {
      $output = substr_replace($img, '-log', -strlen($theExt) - 1, 0);
    }

    // 中屏幕解决方案
    else if ($screen_width <= 1024) {
      $output = substr_replace($img, '-med', -strlen($theExt) - 1, 0);
    }

    // 检查文件是否存在
    if (isset($output) && file_exists($output)) {
      $img = $output;
    }
  }
  // 返回图片地址
  readfile($img);
}
?>

现在通过你的图像编辑软件,打开一张尺寸较大的图像,然后保存两份较小尺寸的新图像。如果原始图像为300px,那么新图像的大小可以分别保存为200px和100px。然后分别命名为 robot.png、robot-med.png 及 robot-low.png,并上传到 images 文件夹中。

最后很重要的一点,将下面的HTML文件存放到服务器端的文档根目录中:

<!doctype html>
<html>
  <head>
    <title>Responsive Images</title>
    <meta charset="utf-8">
    <script>
      document.cookie = "screen_dimensions=" + screen.width + "x" screen.height;
    </script>
  </head>
  <body>
    <img alt="robot image" src="images/index.php?robot_png&watermark/1/image/aHR0cDovL3d3dy56enl6YW4uY29tL3dwLWNvbnRlbnQvdXBsb2Fkcy8yMDE2LzA3Lzk2ZDZmMmU3ZTFmNzA1YWI1ZTU5Yzg0YTZkYzAwOWIyLnBuZw==/dissolve/100/gravity/SouthEast/dx/10/dy/10">
  </body>
</html>

虽然该方法只能根据屏幕大小返回特定的图像,并不完全是自适应的,但是该方法在服务器端提供与CSS媒介查询一样的功能。可以通过CSS给这些图片加上样式,或者使用JavaScript实现动画效果。将不同的方法结合在一起使用,能够更好地提供响应式内容。

工作原理

首先HTML文件中创建cookie用以记录设备屏幕的尺寸。当向服务端发起获取图片的请求时,就如同PHP中的include声明一样。首先检査声明的文件是否存在,然后读取cookie中的屏幕尺寸,最后返回与之适配的图像资源。

打赏
吐槽 (0)
×
加载中,请稍候…

您需要 登录 后才能发表评论。

avatar

- 评论

  • 加载中,请稍候…
我要吐槽