加载图像需要一段时间


Images take a while load

我有一个PHP代码打印图像(echo"<img src='uploads/icon.png'/>";),事情是,我第一次运行这段代码的img需要像一秒钟出现,然后当我刷新浏览器的图像立即出现,有没有办法缓存img浏览器之前加载?

你不能缓存尚未加载的内容,但你可以做的是延迟加载图像(例如,使用JQuery LazyLoad),或者甚至加载图像的低质量版本,然后使用客户端JS异步加载全质量图像。

无论哪种方式,图像都必须在你缓存它之前呈现给用户,你只能控制它是否会与页面的其他部分同步加载

有许多加快图像加载的技术。根据您的场景,它可以是

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

您也可以为图片和其他资源使用单独的子域

您可以使用杠杆浏览器缓存和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>

你可以同时添加它们,你会看到加载时间的巨大变化