I have a record from the database which I'm fetching to display in my site. It has different thumbnails that when you click, a bigger image of it on the side will change according to the one you clicked. I am using the same image source for the thumb and bigger image, I am only scaling it's size. The problem is that the page might take some time to load if the images are too big. How can I separate the image source from the bigger-image source but still be in a dynamic way?

Here's the sample view

$(document).ready(function(){ $(".thumb").click(function(event){ $(".mainpic").attr("src",$(this).attr("src")); }); });