如何预取和预渲染整个图像文件答案

【问题标题】：How to prefetch and prerender an entire file of images如何预取和预渲染整个图像文件
【发布时间】：2015-03-26 21:10:05
【问题描述】：

我有一堆图片存储在 XYZ.com/images/page1

图像都非常相似，例如 image1.png、image2.png 等。所以 URL 是 XYZ.com/images/page1/image1.png

有没有办法为页面预取/预渲染文件中的所有图像？

【问题讨论】：

标签： html image google-chrome prefetch prerender

【解决方案1】：

HTML5 支持resource pre-fetching，它利用浏览器空闲时间下载或预取用户可能在不久的将来访问的文档。

解决方案 A：您可以加载显示所有这些图像的页面：

<link rel="prefetch prerender" href="page1.html">

解决方案 B：您可以单独缓存图像：

<link rel="prefetch prerender" href="/images/big.jpeg">
<link rel="prefetch prerender" href="/images/big2.jpeg">
<link rel="prefetch prerender" href="/images/big3.jpeg">

注意：prerender 不是标准属性，但 Chrome 和 IE11+ 支持

Learn more here

【讨论】：

【解决方案2】：

以下 PHP 文件会自动显示您文件夹中的所有图片，您无需手动更新任何内容，只需上传到该文件夹即可。

<?php
$folder = 'images/page1/';
$filetype = '*.*';
$files = 

glob($folder.$filetype);
$count = count($files);
echo '<table>';
for ($i = 0; $i < $count; 

$i++) {
echo '<tr><td>';
echo '<a name="'.$i.'" 

href="#'.$i.'">
<img src="'.$files[$i].'" 

/></a>';
echo
substr($files[$i],strlen($folder), strpos($files[$i], '.')-strlen($folder));
echo '</td></tr>';
}
echo '</table>';
?>

【讨论】：