Fatal编程技术网
  • php/
  • Php 预加载图像以防止可见图像加载的最可靠方法？（不含JS）

Php 预加载图像以防止可见图像加载的最可靠方法？（不含JS）

php html

Php 预加载图像以防止可见图像加载的最可靠方法？（不含JS）,php,html,Php,Html,我刚刚创建完一个图像上传功能，有点失望 访问包含一张或多张照片的页面时，我体验到： 冗长的加载时间（~0.5秒） 不美观的图像加载（您可以从上到下查看照片加载） 我的问题是：如果不使用Javascript，我如何确保在向用户展示之前加载整个照片（我试图找到一种方法，确保图像在主体之前完全加载） 注意：这个问题假设照片是从同一目录中的文件夹缓存加载的。我认为没有javascript您无法完成 部分解决方法是在用户打开的第一个页面中加载所有图像，以便将所有图像保存到缓存中，但正确的方法是使用ja

我刚刚创建完一个图像上传功能，有点失望

访问包含一张或多张照片的页面时，我体验到：

  • 冗长的加载时间（~0.5秒）

  • 不美观的图像加载（您可以从上到下查看照片加载）

我的问题是：如果不使用Javascript，我如何确保在向用户展示之前加载整个照片（我试图找到一种方法，确保
图像
在
主体
之前完全加载）

注意：这个问题假设照片是从同一目录中的文件夹缓存加载的。

我认为没有javascript您无法完成

部分解决方法是在用户打开的第一个页面中加载所有图像，以便将所有图像保存到缓存中，但正确的方法是使用javascript

为什么不想使用javascript？

使用http2/spdy将允许您使用服务器端推送，并使您能够在服务器端控制何时和如何获取图像。您可以尝试这种方式，但我认为使用javascript更容易。

我从未尝试过，但幻想告诉我，您可以使用

$im = file_get_contents('filename.gif');
$imdata = base64_encode($im);  
//taken from http://stackoverflow.com/questions/35879/base64-encoding-image
而不是在服务器请求上传验证后生成内联css样式并将结果作为div后台

当然，在htaccess中启用gzip/deflate。第一个图像出现时有点毫无意义，但谁知道…

在页面打开之前您无法加载图像，因为浏览器不知道页面需要什么图像。为了避免在没有JS的情况下出现自上而下的加载效果，您可以使图像变小和/或使用隔行扫描保存它们。

使用链接预取可以实现您想要的吗？它并不适合每一个用户，但它可能是一个简单的方法来实现你想要的

仅针对一幅图像：

对于整个页面：

对于预呈现页面内容：

这些标签需要放在网站的html标题部分

您可能还想考虑使用一个CDN或一个子域，它将服务于静态内容，如果您在同一页上加载大量图像，则不通过标题（主要是Cookie）。p>

另一种可能适合您的方法：

1。渐进式JPEG

为了避免“从上到下”加载图像，您可以使用“渐进式jpeg”，在加载过程中渲染图像的“模糊”版本，而不是“从上到下”： 例：

2。嵌入式（以base64编码）

如果确实希望同时显示图像和页面，则应将其编码为base64并将其包含在页面中：

<img src="data:image/jpeg;base64,iVBORw0KGgoAAAANSUhEUgAAADIA..." alt="" />
您可以通过PHP或任何服务器端脚本来实现

<img src="data:image/jpeg;base64,<?=base64encode(file_get_contents($file_path))?>" alt="" />

“alt=”“/>

3.伪装成样式表（可怕的黑客）

如果要在加载图像之前真正阻止渲染，可以在页面的
部分的
标记中将页面中的图像加倍

浏览器在CSS加载之前不会显示页面，即使您的文件不是CSS，它也会加载并缓存它们，一旦加载，页面将呈现，图像将从缓存加载

<html>
<head>
  <link rel="stylesheet" href="your_image_01.jpg" />
  <link rel="stylesheet" href="your_image_02.jpg" />
</head>
<body>
...
  <img src="your_image_01.jpg" alt="" />
  ...
  <img src="your_image_02.jpg" alt="" />
...
</body>
</html>


...
...
...
尝试将其作为另一个元素的背景加载

或者将其加载到隐藏元素中（显示：无）

另外，请参阅：

仅使用PHP是不可能做到这一点的（除了与DOM加载和HTML相关的方法外，建议的方法是使用一个监视程序并在检测到图像加载完成时触发事件）

但是，有几种方法可以加快PHP中的图像加载速度：

确保图像存储在目录中，而不是作为
BLOB
如果您正在数据库中以某种硬编码格式存储图像，并且没有从目录直接访问图像，则应停止此操作。这会显著增加加载时间和图像渲染

在本地完成调整大小 在将图像上载到服务器之前，直接对图像进行调整大小。可以使用PHP内置函数进行调整。类似如下：

$source_imagex = imagesx($source_image);
$source_imagey = imagesy($source_image);
$dest_imagex = AVATAR_IMAGE_WIDTH;
$ratio = $dest_imagex / $source_imagex;
$dest_imagey = $ratio * $source_imagey;
$dest_image = imagecreatetruecolor($dest_imagex, $dest_imagey);
$image = imagecopyresampled($dest_image, $source_image, 0, 0, 0, 0, $dest_imagex, $dest_imagey, $source_imagex, $source_imagey);
您可以适当地计算预大小图像的宽度、高度和比例，以保持纵横比。常量
化身图像宽度
可以设置为任何值（或
化身图像高度
），或者您可以根据自己的喜好调整变量。这将防止CSS必须加载DOM并加载完整大小的图像，然后将其调整为您想要的大小。

并且不会解决您的问题？您是否使用CSS调整大小（就像CSS为您调整图像大小一样，还是自动加载？）我从来没有说过我不想使用JS。我很好奇JavaScript是否是实现这一任务的唯一方法。关于方法3：我喜欢这种“因为我们可以”因子（+1）的破解方法.浏览器在加载css之前会阻止渲染，以避免FOUC。但是，您能确认所有浏览器都能保证这一点吗？我尝试搜索web，但找不到任何要求这一点的规范（W3），也找不到任何来源说所有浏览器都能做到这一点（但也没有反例）.我只是在FF和Chrome上做了一个快速测试，看起来像“预期的”一样。我不能保证这种可怕的黑客攻击在任何地方都能奏效：） 
$source_imagex = imagesx($source_image);
$source_imagey = imagesy($source_image);
$dest_imagex = AVATAR_IMAGE_WIDTH;
$ratio = $dest_imagex / $source_imagex;
$dest_imagey = $ratio * $source_imagey;
$dest_image = imagecreatetruecolor($dest_imagex, $dest_imagey);
$image = imagecopyresampled($dest_image, $source_image, 0, 0, 0, 0, $dest_imagex, $dest_imagey, $source_imagex, $source_imagey);