如果要加载更大尺寸的图像，则显示确认框。 [英] Showing confirm box if a bigger size image is going to load.

问题描述

我有一个页面，我在其中加载图像。

一切正常。

我想进行如下增强;



有一个更大尺寸的图像将被加载。因此加载需要一些时间（让它15秒）。

但是小尺寸图像需要4-5秒才能加载。



所以我想在10秒后给用户一个确认框是否用户想要继续或丢弃它以防更大的图像。

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.

推荐答案

你可以获取XHR响应标题数据并检查图像大小，然后显示确认框：



http://www.w3.org/TR/XMLHttpRequest/#the-getresponseheader （）-method



此函数将获取所请求URL的文件大小：

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:

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.
});

在文件上传开始时创建一个单独的线程，并在文件上传完成后关闭该线程。

但是内部线程你必须启动一个计时器并检查时间是否大于10秒或没有t。

如果为真，则设置一个消息框。

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 .

我得到了如下解决方案;



在准备好的功能上调用它。



var checkImageLoad = false;



var counter; < br $>


counter = setInterval（checkLoading，1000）; // 1000每1秒运行一次

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

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() {

这篇关于如果要加载更大尺寸的图像，则显示确认框。的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！