Showing confirm box if a bigger size image is going to load.

Question

0.00/5 (No votes)

See more:

I have a page within which i am loading an image.
all are working fine.
I want to do an enhancement as follows;

There is a bigger size image is going to load. So it will take some time to load(Let it 15 seconds).
But a small size image takes 4-5 seconds to load.

So i want to give a confirm box to the user after 10 seconds whether the user want to continue or discard it in case of bigger images.

Posted 11-Nov-13 19:00pm

Member 10284541

Add a Solution

Comments

Tadit Dash (ତଡିତ୍ କୁମାର ଦାଶ) 12-Nov-13 1:16am

You can show Progress Bar, but I don't know whether you determine the time and show message according to that.

Member 10284541 12-Nov-13 1:28am

i have already implmented progress bar.
But I have to show a confirm box if the progress bar is running for more than 10 seconds.\

4 solutions

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Kamalsingh Saini · Answer 1 · 2013-11-11T19:33:00

You can get XHR response header data and check the image size and then show confirm box:

http://www.w3.org/TR/XMLHttpRequest/#the-getresponseheader()-method

This function will get the filesize of the requested URL:

JavaScript

function get_filesize(url, callback) {
    var xhr = new XMLHttpRequest();
    xhr.open("HEAD", url, true); // Notice "HEAD" instead of "GET",
                                 //  to get only the header
    xhr.onreadystatechange = function() {
        if (this.readyState == this.DONE) {
            callback(parseInt(xhr.getResponseHeader("Content-Length")));
        }
    };
    xhr.send();
}

get_filesize("http://example.com/foo.jpg", function(size) {
var dowload = true;
if(size>maxSize)
 dowload = confirm("The size of image is: " + size + " bytes and may take 10 to 15 sec, do you want to proceed?");
if(dowload)
 getImage();//Your function to show image.
});

Suk@nta · Answer 2 · 2013-11-11T19:47:00

Solution 2

create a separate thread at the be beginning of file upload and close that thread after file upload complete.
But inside thread u have to start a timer and check if time greater than 10sec or not.
if got true then set a message box .

Posted 11-Nov-13 19:47pm

Suk@nta

Member 10284541 · Answer 3 · 2013-11-12T23:08:00

I got the solution as below;

Call it on ready function.

var checkImageLoad = false ;

var counter;

counter = setInterval(checkLoading, 1000); //1000 will run it every 1 seconds

C#

var count = 0;
function checkLoading() {
           count = count + 1;
      if (count >= 10 && checkImageLoad == false)
       {
                Confirm();
                clearInterval(counter);
        return;
       }
}

//Creates Confirm Box when there is a delay in image loading
function Confirm() {
$("#divConfirm").dialog({

modal: true,
width: 500,
resizable: false,
buttons: [{

text: 'Yes',
click: function () {
$(this).dialog('close');
}
},
{
text: 'No',
click: function () {
//Write your code what you want to do if NO
}
}]
});

$(".ui-dialog-titlebar").text("Confirm");
$(".ui-dialog-titlebar").css("text-align", "center");
$(".ui-widget-content").css("padding-left", 5);
$(".ui-widget-content").css("padding-right", 5);
}

vinay.Singh · Answer 4 · 2013-11-13T00:03:00

Solution 4

Hi check the below link
http://www.dotnetpools.com/2013/11/jquery-code-to-show-confirm-box-with.html[^]

Posted 13-Nov-13 0:03am

vinay.Singh

Showing confirm box if a bigger size image is going to load.

4 solutions

Solution 1

Solution 2

Solution 3

Solution 4

Add your solution here

Preview 0