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

Question

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

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

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

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支持资源预取，利用浏览器空闲时间下载或预取用户可能在不久的将来访问的文档。

解决方案 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+ 支持

在这里了解更多