CODEWITHSUNDEEP
c#javascriptasp.net-mvcasp.net-mvc-3razor
Travis J
Travis J

Reputation: 82267

MVC3 Pre-Loading many images in view

This is being done in C#, asp.net 4.0, MVC3 with razor tags

I have albums which have up to 9 pictures each. The pictures are saved on a filesystem and managed by a database. I can build the whole object in my controller and pass it into the view which has all the database information for the albums. However, preloading potentially hundreds of images (This is done in the view, not the controller) could be very intensive on the initial page load - even if it means all the images are instantly rendered. My page design is such that there is a sliding window of images which then displays the album lower in the page based on the selection in the sliding window.

a) When should I be pre-loading, or caching these images?

b) Should I use javascript to preload or should I use some structure of MVC3 to preload/cache the images?

What I am going to do is to have an animation when the sliding window is moved to a new album and during the animation I will be pre-loading the images of the album, but I am open to alternatives or suggestions and would greatly appreciate any ideas.

Thank you

Upvotes: 2

Views: 1338

Answers (1)

Daniel Powell
Daniel Powell

Reputation: 8293

I'd recommend going down the JS path, this would allow your whole page to load and then you can trigger loading of images such that the page is still useful while they are loading.

You can do something like this for your images, where you replace the # with a link to the loading gif. 

<img src="#" delayed="http://mydomain.com/myimage.png"/ >

and then in JQuery once the page is completed loading

$('img').each(function(){ $(this).attr('src', $(this).attr('delayed')); });

That will swap the delayed image path into the src and cause the image to get loaded.

There was a jquery plugin to do this at one point but last time I looked it was broken.

EDIT: looks like it has been updated

Upvotes: 3

Related Questions