I have an ASP.NET MVC
based website witch manages the database content and generate RSS
files with View
. But for output I use simple static HTML
pages witch downloads content with a js
file as code in blew:
$.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>');
});
});
Thumbnails are generating using this code:
public async Task<ActionResult> Instrument(Guid? Id = null)
{
if (Id == null) return HttpNotFound();
return File(db.Instruments.Find(Id).Thumbnail, "image/png");
}
You can see that images are not ftp files. They are loading from database. For example a thumbnail url
for browser: ~/Thumbs/Instruments/fdbc870e-87a4-4d6e-befa-027af647f4ca
As you now, because this way has a behavior like lazy loading
, I used it. But it has some problems such as downloading images every time. How can I cache images in browser for next use?
Note: I know that there are lots of plugins ready; But because my project is not standard as I said, this challenge is with it.
Why? I wanna reduce my database server traffic.