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

Question

我有一堆图像存储在 XYZ 中。com/images/page1

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

有没有办法 prefetch/prerender 页面文件中的所有图像？

Answer 1

下面的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>';
?>

Answer 2

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