我刚刚创建了一个图片上传功能,我有点失望.
在访问包含一张或多张照片的页面时,我遇到了:
繁琐的加载时间(~0.5秒).
不美观的图像加载(您可以看到从上到下的照片加载).
我的问题是:如何在将照片呈现给用户之前确保整张照片已加载(我试图找出一种方法来确保在image完全加载之前body)而不使用Javascript？
注意:这个问题是假设正在从同一目录中的文件夹缓存加载照片.
Flu*_*nch 16
1.渐进式JPEG
为了避免图像的"从上到下"加载,您可以使用"渐进式jpeg",它在图片加载过程中呈现"模糊"版本,而不是"从上到下":Ex.: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.伪装成样式表(糟糕的黑客)
如果要在加载图像之前重新阻止渲染,可以在页面部分的<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>