0

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.

Prageeth Liyanage
  • 1,612
  • 2
  • 19
  • 41

3 Answers3

1

use ajax for this, simple create a div with loading gif and set it to display:none

<div id="loading"><img src="url..." /></div>

then cll the div to show when user hits the loadFullImage function using this

$('loading').show();

and when the image is complete loaded, unset the div 

$('loading').hide();

your function will be like this 

<script type="text/javascript">

    function loadFullImage(ctrl) {
        $('loading').show();
        var url = ctrl.getAttribute("data-url");
        var imgFull = document.getElementById("imgFull");
        imgFull.src = url;
        $('loading').hide();

    }
</script>
Bilal Zafar
  • 447
  • 7
  • 20
  • Bilal, Can you update the answer with my function please. Where to put those cords? :) Thanks – Prageeth Liyanage Jan 11 '17 at 11:54
  • use '$('loading').show();' after calling your function on first line and at the end of function call this line '$('loading').hide();' and show the div with loading image where you want to appears the loading image – Bilal Zafar Jan 11 '17 at 11:56
0

Try to load your image asynchronously, e.g. with jQuery. This has been answered before and should help you here. Basic idea is to kick off the async request and display a loading icon. When the complete event has triggered, remove the loading icon as the image pixels should be fully loaded.

https://stackoverflow.com/a/4285068/1143300

Community
  • 1
  • 1
angabriel
  • 4,979
  • 2
  • 35
  • 37
0

The @Bilal answered correctly!

But I would change a line!

Something like this:

    if ( $('#imgFull').load() ) {
      $('loading').hide();
    }

I always use the Method LOAD to hide the 'loading block' just when the image is completly loaded.

Gilberto B. Terra Jr.
  • 311
  • 3
  • 12