Question

我有一个打印图像（echo"<img src='uploads/icon.png'/>";）的PHP代码，事情就是我第一次运行这段代码时img需要一秒钟才出现然后当我刷新浏览器时图像立即出现，有没有办法在加载前将img缓存到浏览器？

Answer 1

你无法缓存尚未加载的东西，但你可以做的是延迟加载图像（例如，使用JQuery LazyLoad），甚至加载图像的低质量版本和然后使用客户端JS异步加载完整质量的图像。

无论哪种方式，图像都必须在用户缓存之前将其发送给用户，您只能控制它是否与页面的其余部分同步加载。

Answer 2

有很多技巧可以加快图像加载速度。根据您的情况，它可能是

image sprites
图像压缩和正确的格式取决于目的
图片预加载
异步图片加载
使用CDN

您还可以为图像和其他资源使用单独的子域。

Answer 3

您可以使用Leverage浏览器缓存和Gzip压缩，这将有助于您提高加载速度

对于杠杆缓存，您可以将以下代码添加到.htaccess

## EXPIRES CACHING ##
<IfModule mod_expires.c>
ExpiresActive On
ExpiresByType image/jpg "access plus 1 year"
ExpiresByType image/jpeg "access plus 1 year"
ExpiresByType image/gif "access plus 1 year"
ExpiresByType image/png "access plus 1 year"
ExpiresByType text/css "access plus 1 month"
ExpiresByType application/pdf "access plus 1 month"
ExpiresByType text/x-javascript "access plus 1 month"
ExpiresByType application/x-shockwave-flash "access plus 1 month"
ExpiresByType image/x-icon "access plus 1 year"
ExpiresDefault "access plus 2 days"
</IfModule>
## EXPIRES CACHING ##

您可以通过在.htaccess

中添加以下代码来启用Gzip压缩

<IfModule mod_deflate.c>
  # Compress HTML, CSS, JavaScript, Text, XML and fonts
  AddOutputFilterByType DEFLATE application/javascript
  AddOutputFilterByType DEFLATE application/rss+xml
  AddOutputFilterByType DEFLATE application/vnd.ms-fontobject
  AddOutputFilterByType DEFLATE application/x-font
  AddOutputFilterByType DEFLATE application/x-font-opentype
  AddOutputFilterByType DEFLATE application/x-font-otf
  AddOutputFilterByType DEFLATE application/x-font-truetype
  AddOutputFilterByType DEFLATE application/x-font-ttf
  AddOutputFilterByType DEFLATE application/x-javascript
  AddOutputFilterByType DEFLATE application/xhtml+xml
  AddOutputFilterByType DEFLATE application/xml
  AddOutputFilterByType DEFLATE font/opentype
  AddOutputFilterByType DEFLATE font/otf
  AddOutputFilterByType DEFLATE font/ttf
  AddOutputFilterByType DEFLATE image/svg+xml
  AddOutputFilterByType DEFLATE image/x-icon
  AddOutputFilterByType DEFLATE text/css
  AddOutputFilterByType DEFLATE text/html
  AddOutputFilterByType DEFLATE text/javascript
  AddOutputFilterByType DEFLATE text/plain
  AddOutputFilterByType DEFLATE text/xml

  # Remove browser bugs (only needed for really old browsers)
  BrowserMatch ^Mozilla/4 gzip-only-text/html
  BrowserMatch ^Mozilla/4\.0[678] no-gzip
  BrowserMatch \bMSIE !no-gzip !gzip-only-text/html
  Header append Vary User-Agent
</IfModule>

您可以同时添加它们，您将看到加载时间的巨大变化。

图像需要一段时间的负载

3 个答案: