我刚刚创建了一个图片上传功能，有点失望。
在访问包含一张或多张照片的页面时，我遇到:
冗长的加载时间(~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)
如果你想在加载图像之前真正阻止渲染，你可以在页面中将图像加倍 <link rel=stylesheet> <head> 中的标签页面的一部分。
在加载 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 - 预加载图像以防止可见图像加载的最可靠方法？ (没有JS)，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/32238385/