我刚刚创建了一个图片上传功能，有点失望。
在访问包含一张或多张照片的页面时，我遇到：
冗长的加载时间（~0.5 秒）。
不美观的图片加载（您可以从上到下看到图片加载）。
我的问题是：如何确保在将整张照片呈现给用户之前加载它（我试图找出一种方法来确保 image 在之前完全加载body) 不使用 Javascript？
注意：这个问题假设照片是从同一目录中的文件夹缓存加载的。..
【问题讨论】：
1.渐进式 JPEG
为避免“从上到下”加载图像，您可以使用“渐进式 jpeg”，它在加载过程中呈现“模糊”版本的图片，而不是“从上到下”： 前任。 ：http://blog.patrickmeenan.com/2013/06/progressive-jpegs-ftw.html
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="" />
https://en.wikipedia.org/wiki/Data_URI_scheme#Web_browser_support
3.伪装成样式表（可怕的 hack）
如果您想在加载图像之前重新阻止渲染，您可以在页面的<head> 部分中的<link rel=stylesheet> 标记中将页面中的图像加倍。
在加载 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>
【讨论】：
我认为没有 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。出现的第一张图片有点毫无意义，但谁知道...
【讨论】：
使用链接预取可以实现您想要的吗？它并不适合每个用户，但它可能是实现您想要的简单方法。
https://developer.mozilla.org/en-US/docs/Web/HTTP/Link_prefetching_FAQ
只需一张图片：<link rel="prefetch" href="/images/big.jpeg">
对于整个页面：<link rel="next" href="2.html">
预渲染页面内容：<link rel="prerender" href="2.html">
这些标签需要放在您网站的 html 标头部分中。
如果您在同一页面上加载大量图像，您可能还需要考虑使用 CDN 或子域来提供不传递标头（主要是 cookie）的静态内容。
https://jack.ofspades.com/prefetching-preloading-and-prerendering-content-with-html/
另一种可能对您有用的方法：https://perishablepress.com/a-way-to-preload-images-without-javascript-that-is-so-much-better/
【讨论】：
您无法在页面打开之前加载图片，因为浏览器不知道您的页面需要哪些图片。为了避免在没有 JS 的情况下出现自上而下的加载效果，您可以将图像缩小和/或隔行保存。
【讨论】：
尝试将其加载为另一个元素的背景。
或将其加载到隐藏元素中（显示：无）。
#tinyElement{ background: url(images/picture.png) no-repeat -9999px -9999px; }
另请参阅：https://css-tricks.com/snippets/css/css-only-image-preloading/
【讨论】：
仅使用 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);
您可以计算预尺寸图像的宽度和高度，并适当地缩放以保持纵横比。常量AVATAR_IMAGE_WIDTH 可以设置为任何值（或AVATAR_IMAGE_HEIGHT），或者您可以根据自己的喜好调整变量。这将防止 CSS 必须加载 DOM 并以全尺寸加载图像，然后将其调整为您想要的任何大小。
【讨论】：