Question

我有两个php变量：$img1src和$img2src，（它们与PHP无关，因为你可以在任何地方回显php变量）它们都拥有图像的URL。我想知道我是否能够预加载这些图像，或者缓存它们。

我的目标是：当某人刷新页面时，我希望这些图片能够立即显示在<img src >中。

Answer 1

我不会提供具体的代码，因为我不想给你一条鱼，而是展示google是如何钓鱼的。

我用Google搜索"php cache images tutorial"只是为了看看会出现什么。以下是一个很好的资源。

http://dtbaker.com.au/random-bits/how-to-cache-images-generated-by-php.html

不能比那更好。

Answer 2

当然可以，试试这个javascript：

var image1 = new Image(), image2 = new Image();
image1.src = <?php echo $img1src; ?>;
image2.src = ?<php echo $img2src; ?>;

这应该预先加载图片，因此当您向img附加DOM标记时，图片应立即显示。

Answer 3

缓存图像并不是PHP的工作。 PHP应该用于决定是否显示它。（您可以使用PHP进行缓存，但不是同样的意思。）基本上，您要做的是让客户端浏览器请求第二个图像。浏览器获取图像后，它应自动在标题中发送“if-modified-by”参数。下次加载页面时，响应代码应为304，您的图像应立即加载。您可以从多种方式中进行选择。在页面加载后使用javascript加载图像（以防止额外的加载时间），或者您可以只在页面上隐藏一些图像标记。

我还没有测试过，但您可以直接向图像发送ajax请求。我不确定这种方式是否会缓存它。

编辑：这不是最优雅的解决方案，但它应该能够解决这个问题。

JS示例：

<?php
session_start();
if (!isset($_SESSION['graphic'])) $_SESSION['graphic'] = "http://www.tomsfreelance.com/laptop/DSC_0011.JPG";
else $_SESSION['graphic'] = "http://www.tomsfreelance.com/laptop/DSC_0012.JPG";
?>
<html>
<head>
<script>
function loadImage() {
    document.getElementById('preload').style.backgroundImage = "url(http://www.tomsfreelance.com/laptop/DSC_0012.JPG)";
}
</script>
</head>
<body onload="loadImage();">
<div id="preload" style="display: none;"></div>
<img src="<?php echo $_SESSION['graphic'];?>">
</body>
</html>

Answer 4

如果您的目标是减少整体http请求：您可以尝试使用CSS Sprites和/或Data Url方法来显示这些图片。当图像较小时，这些方法将是最有效的。

预加载图片以进行刷新，缓存

4 个答案: