CODEWITHSUNDEEP
javascriptjqueryhtmlasp.netimage
Prageeth Liyanage
Prageeth Liyanage

Reputation: 1772

How to display a progress icon untill selected image is fully loaded?

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.

Upvotes: 0

Views: 281

Answers (3)

Gilberto B. Terra Jr.
Gilberto B. Terra Jr.

Reputation: 313

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.

Upvotes: 0

Bilal Zafar
Bilal Zafar

Reputation: 457

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>

Upvotes: 1

angabriel
angabriel

Reputation: 5028

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

Upvotes: 0

Related Questions