缓存图像jquery/javascript globaly

Question

我有一个基于ASP.NET MVC的网站管理数据库内容并生成RSS文件与View。但对于输出，可以使用简单的静态HTML页巫下载内容与js文件代码中自爆：

$.get(RssRoot + '/instruments',function(datas){ 
$('item',datas).each(function(i) { 
    var name = $(this).find("name").text(); 
    var thumbnail = $(this).find("thumbnail").text(); 
    var id = $(this).find("id").text(); 
    var href = Root + '/instrument.html?id=' + id; 
    $("#instrument").append('<a href="' + href + '"><img title="' + name + '" class="image" src="' + thumbnail + '" /></a>'); 
}); 
}); 

缩略图使用此代码生成：

public async Task<ActionResult> Instrument(Guid? Id = null) 
{ 
    if (Id == null) return HttpNotFound(); 
    return File(db.Instruments.Find(Id).Thumbnail, "image/png"); 
} 

你可以看到图像不能ftp文件。他们正在从数据库加载。例如，对于浏览器的缩略图url：~/Thumbs/Instruments/fdbc870e-87a4-4d6e-befa-027af647f4ca

正如你现在，因为这种方式有一个像lazy loading行为，我用它。但它有一些问题，例如每次下载图像。如何在浏览器中缓存图像以备下次使用？

注：我知道有很多插件可用;但是因为我的项目并不像我说的那么标准，所以这个挑战就在于它。

为什么？我想减少我的数据库服务器流量。

Answer 1

如果您希望提高性能，请考虑将项目添加到web.config的<system.webserver>节点。这些将启用对象压缩和缓存静态对象7天：

<httpCompression directory="%SystemDrive%\inetpub\temp\IIS Temporary Compressed Files"> 
      <scheme name="gzip" dll="%Windir%\system32\inetsrv\gzip.dll" /> 
      <dynamicTypes> 
       <add mimeType="text/*" enabled="true" /> 
       <add mimeType="message/*" enabled="true" /> 
       <add mimeType="application/javascript" enabled="true" /> 
       <add mimeType="application/javascript; charset=utf-8" enabled="true" /> 
       <add mimeType="application/x-javascript" enabled="true" /> 
       <add mimeType="*/*" enabled="false" /> 
      </dynamicTypes> 
      <staticTypes> 
       <add mimeType="text/*" enabled="true" /> 
       <add mimeType="message/*" enabled="true" /> 
       <add mimeType="application/javascript" enabled="true" /> 
       <add mimeType="application/javascript; charset=utf-8" enabled="true" /> 
       <add mimeType="application/x-javascript" enabled="true" /> 
       <add mimeType="*/*" enabled="false" /> 
      </staticTypes> 
     </httpCompression> 
     <httpProtocol allowKeepAlive="true"> 
     </httpProtocol> 
     <staticContent> 
      <clientCache cacheControlCustom="public" cacheControlMode="UseMaxAge" cacheControlMaxAge="7.00:00:00" /> 
      <!-- IF PAGE STOPS LOADING CORRECTLY, REMOVE THE FOLLOWING MIME TYPE DEFINITIONS TO DEBUG --> 
      <mimeMap fileExtension=".otf" mimeType="font/otf" /> 
      <mimeMap fileExtension=".woff" mimeType="font/x-woff" /> 
     </staticContent>