Question

如何在html和JavaScript中显示图像加载速度？我有图像大小和我的互联网速度，然后也是时间。但我不知道我如何获得putimage参数的计数值，我该如何实现这个代码....

<html>
<script type="text/javascript">
function putImage( iterations, update ) 
{
       var index = 0,count = 0,
            timer = window.setInterval( check, 1000 ); //check every 1 seconds




//calculating size of the image....
            function getRandomString( sizeInMb ) 
                    {
                        var chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789~!@#$%^&*()_+`-=[]\{}|;':,./<>?", //random data prevents gzip effect
                            iterations = sizeInMb * 1024 * 1024, //get byte count
                            result = '';
                        for( var index = 0; index < iterations; index++ ) 
                        {
                            result += chars.charAt( Math.floor( Math.random() * chars.length ) );
                        };     
                        return result;
                    };

                                //showing file size....
                                if(window.ActiveXObject)
                                    {
                                        var fso = new ActiveXObject("Scripting.FileSystemObject");
                                        var filepath = document.getElementById('select_image').value;
                                        var thefile = fso.getFile(filepath);
                                        var sizeinbytes = thefile.size;
                                    }
                                else
                                    {
                                        var sizeinbytes = document.getElementById('select_image').files[0].size;
                                    }

                                // var fSExt = new Array('Bytes', 'KB', 'MB', 'GB');
                                var fSExt = 'KB';
                                fSize = sizeinbytes; i=0;
                                while(fSize>900)
                                {
                                    fSize/=1024;i++;
                                }
                                //alert((Math.round((fSize*100)/100)*1024)+' '+fSExt);  //showing total image size...



//calculating internet speed....
        var speed = 0;
        check();
        //alert("sss"+speed)
        function check() 
        {
            var xhr = new XMLHttpRequest(),
                url = '?cache=' + Math.floor( Math.random() * 10000 ), //random number prevents url caching
                data = getRandomString( 1 ), //1 meg POST size handled by all servers
                startTime;
                speed;
                count;

            xhr.onreadystatechange = function ( event ) 
            {
                if( xhr.readyState == 4 ) 
                {
                    speed = Math.round( 1024 / ( ( new Date() - startTime ) / 1000 ) );
                     // alert(speed);
                    update( speed );
                    index++;
                    //return speed;
                    if( index == iterations ) 
                    {
                        window.clearInterval( timer );
                    };
                };
                            };
            //alert(speed);
            xhr.open( 'POST', url, true );
            startTime = new Date();
            xhr.send( data );
            //alert(speed);
            a=((Math.round((fSize*100)/100)*1024));  //showing total image size...
            //alert(a);
            count=a/speed;
            //alert(count);
            return count;
            //alert((Math.round((fSize*100)/100)*1024)+' '+fSExt);
        }     
                /*showing image*/
                    var src = document.getElementById("select_image");
                    var target = document.getElementById("target");
                    showImage(src, target);
                    function showImage(src, target) 
                    {
                        var fr = new FileReader();

                        fr.onload = function (e) 
                        { 
                            target.src = this.result; 
                        };

                            fr.readAsDataURL(src.files[0]);
                    }


}
//alert(count);
putImage(count, function ( speed ) 
    {
         //document.getElementById( 'speed' ).textContent = 'speed: ' + speed + 'kbs';
        document.getElementById( 'speed' ).textContent = 'speed: ' + speed;
    } );
</script>
<body>
<div id="speed">speed: 0kbs</div>
<img id="target" />
<input type="file" id="select_image" name="image" onchange="putImage()"> </input>

</body>
<script type="text/javascript" src="jquery-1.7.1.min.js"></script>
</html>

Answer 1

您可以使用它来显示百分比的进度条。对于文件大小，您必须进行简单的计算，例如文件大小为5MB，上传百分比为50％，然后将文件大小除以2并显示上传的大小：2.5MB / 5MB

$(document).ready(function() {
    var maxWidth = 400;
    var duration = 3000;
    var $log = $('#log');
    var $start = $('#start');
    var $stop = $('#stop');
    var timer;

    $start.on('click', function() {
        var $bar = $('#bar');
        Horloge(maxWidth);
        timer = setInterval('Horloge('+maxWidth+')', 100);

        $bar.animate({
            width: maxWidth
        }, duration, function() {
            $(this).css('background-color', 'green');
            $start.attr('disabled', true);
            $stop.attr('disabled', true);
            $log.html('100 %');
            clearInterval(timer);
        });
    });

    $stop.on('click', function() {
        var $bar = $('#bar');
        $bar.stop();

        clearInterval(timer);

        var w = $bar.width();
        var percent = parseInt((w * 100) / maxWidth);
        $log.html(percent + ' %');
    });

});

function Horloge(maxWidth) {
    var w = $('#bar').width();
    var percent = parseInt((w * 100) / maxWidth);
    $('#log').html(percent + ' %');
}

body {
 margin:10px;   
}
#bar {
    width:0px;
    height:25px;
    border:1px solid black;
    background-color:yellow;
    border-radius:3px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="start">Start</button>
<button id="stop">Stop</button>

<div id="bar"></div>
<div id="log"></div>

图像加载速度

1 个答案: