I have a classified website designed by using asp.net In there users can post ads and also they add 5 images to ad. I used file upload control and everything working fine.

When I save it I save them to two folders.

1) Full image

2) Thumbnail image

So when somebody viewing an ad he will see the big image and at below he will see other images which are related to the ad ( Thumbnails )

I did this to reduce the page loading time+bandwidth. So if user need to see the full image he has to click the thumbnail.

Here I attach a preview enter image description here

So this is the html code of thumbnail image

<img src='/Images/Thumbnail/{0}' data-url='/Images/Full/{0}' id='{0}' onclick='loadFullImage(this)'/>

This is the script that setting the full image path when somebody click on a thumbnail

    <script type="text/javascript">
    function loadFullImage(ctrl) {
        var url = ctrl.getAttribute("data-url");
        var imgFull = document.getElementById("imgFull");
        imgFull.src = url;

    }
</script>

Hope now you understand what is happening. This is working fine.

Now the problem is ( actually I need a tweak) When someone click on the thumbnail it will take a while to load the image. Its not an error. Its the loading time. So i want to display an progress image until it fully loaded. How to do that? or is there a way to reduce that delay?

Please note that when somebody click on the thumbnail image there is no postback event occurring at server side. Only it will look for that full image folder.

Related posts

Recent Viewed