图像需要一段时间才能加载

Question

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

Answer 1

You couldn't cache something that was not yet loaded, but what you could do is lazy-load the image (for example, using JQuery LazyLoad ), or even load a low-quality version of the image and then asynchronously load the full-quality image using client side JS.

Either way, the image's gonna have to make it to the user before you can cache it, you can only control whether or not it will load in sync with the rest of the page.

Answer 2

There are many techniques how to speed up image loading. Depending on your scenario it could be

• image sprites
• image compression and correct format depending on purpose
• image preloading
• async image loading
• use CDN

You could also use separate subdomain for images and other resources.

Answer 3

You can use Leverage browser caching and Gzip compression which will help you much with the loading speed

For leverage caching you can add below code to the .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 ##

And you can enable Gzip compression by adding below code to .htaccess

<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>

You can add them both and you will see a vast change in loading time.