PHP:显示Web服务中的图像

Question

我正在使用外部Web服务,该服务将返回我将在我的网站中显示的图像URL,例如:

$url = get_from_web_service();
echo '<img url="'.$url.'" />';

一切都工作正常,除非我有100个图像显示然后调用Web服务成为时间和资源消耗.

//the problem
foreach($items as $item) {
   $url = get_from_web_service($item);
   echo '<img url="'.$url.'" />';
}

所以现在我正在考虑两种选择:

//Option1: Using php get_file_contents():
foreach($items as $item)
{
   echo '<img url="url_to_my_website/get_image.php?id='.$item->id.'" />'
}

get_image.php :

$url = get_from_web_service($id);
header("Content-Type: image/png");
echo file_get_contents($url);


//Option2: Using ajax:

echo '<img scr="dummy_image_or_website_logo" data-id="123" />';

//ajax call to the web service to get the id=123 and get the url then add the src attribute to that image.

思考

1. 第一个选项似乎更直接,但我的服务器可能会过载并涉及每个图像请求.
2. 第二个选项全部由浏览器和Web服务完成,所以我的服务器根本没有参与.但对于每个图像,我正在进行2次调用1 ajax调用以获取图像URL,另一个调用以获取图像.所以加载时间可能会有所不同,并且ajax调用可能会因大量调用而失败.

信息

1. 该页面将显示约50张图像.
2. 在给定时间,大约100个用户将使用此服务.
3. 我无法控制Web服务,因此我无法更改其功能,并且每次调用不接受超过1个图像ID.

我的问题

1. 我应该考虑哪些更好的选择？
2. 如果没有,我应该遵循哪个选项？最重要的是为什么我应该遵循那个？

谢谢

Answer 1

方法1:在PHP中渲染

优点:

• 允许独立于任何服务器软件的自定义标头.如果您正在使用通常不缓存的内容(例如带有查询字符串的PHP文件),或者将其添加到需要标头功能的软件包,而不管服务器软件如何,这是一个非常好的主意.

• 如果您知道如何使用GD或Imagick,您可以轻松调整图像的大小,裁剪,压缩,索引等,以减少图像文件的大小(有时会大幅减少)并使页面加载速度明显加快.

• 如果将宽度和高度作为变量传递给PHP文件,则可以动态设置尺寸:

  <div id="gallery-images">
      <noscript>
          <!-- So that the thumbnail is small for old mobile devices //-->
          <img src="get-image.php?id=123&h=200&w=200" />
      </noscript>
  </div>
  <script type="text/javascript">
      /* Something to create an image element inside of the div.
       * In theory, the browser height and width can be pulled dynamically
       * on page load, which is useful for ensuring that images are no larger
       * than they need to be. Having a function to load the full image
       * if the borwser becomes bigger isn't a bad idea though.
       */
  </script>
  

  对于具有图库的页面上的移动用户来说,这将是非常体贴的.这也是对带宽有限的用户非常体贴(就像阿拉斯加的几乎每个人一样.我从个人经验中说出这一点).

• 如果用户在网站上传图像,则可以轻松清除图像的EXIF数据.这对于用户隐私以及确保JPG中没有任何恶意脚本非常重要.

• 如果它们导致延迟,则可以动态创建大型图像精灵并大幅减少HTTP请求.这是一项很多的工作,所以这不是一个非常强大的专业人士,但你仍然可以使用这种方法,你不能使用第二种方法.

缺点:

• 根据图像的数量和大小,这可能会给您的服务器带来很大压力.当与浏览器缓存一起使用时,动态图像将从缓存中提取而不是重新生成,但是对于机器人来说,仍然很容易为动态图像提供多次服务.

• 它需要了解HTTP头,基本的图像处理技巧,以及如何在PHP中使用图像处理库才能有效.

方法2:AJAX

优点:

• 页面将在任何图像之前完成加载.如果您的内容绝对需要尽快加载,并且图像不是很重要,这一点很重要.

• 与任何类型的动态PHP解决方案相比,实现起来更加简单,容易且快得多.

• 它会分隔HTTP请求,因此初始内容加载速度更快(因为HTTP请求可以基于浏览器操作而不仅仅是页面加载来发送).

缺点:

• 它不会减少HTTP请求的数量,只是将它们分开.另请注意,除了所有这些图像之外,还将至少有一个额外的外部JS文件.

• 如果终端设备(例如旧的移动设备)不支持JavaScript,则不显示任何内容.解决这个问题的唯一方法是让所有图像在某些<noscript>标记之间正常加载,这需要PHP生成两倍的HTML.

• 需要您向页面添加loading.gif(和另一个HTTP请求)或Please wait while these images load文本.我个人认为这对网站用户来说很烦人,因为我希望在页面"完成加载"时看到所有内容.

结论:

如果您具备学习如何有效使用方法1的背景知识或时间,那么它提供了更大的潜力,因为它允许在加载后处理页面发送的图像和HTTP请求.

相反,如果您正在寻找一种简单的方法来隔离您的HTTP请求,或者想要通过稍后加载额外的图像来加快内容加载,那么方法2就是您的答案.

回顾方法1和方法2,看起来将两种方法结合使用可能是最好的答案.将两个缓存和压缩的图像与页面一起加载(一个是可见的,另一个是缓冲区,这样用户每次点击"下一个"时都不必等待),并且其余的一个一个地加载一个用户认为合适.

在您的具体情况下,如果您的图像可以以"幻灯片"方式显示,我认为方法2将是最有效的.如果需要立即加载所有图像,请尝试压缩它们并使用方法1应用浏览器缓存.如果页面加载时太多图像请求正在破坏您的速度,请尝试图像spriting.