0

我正在尝试通过从 Internet 下载 3 个图像文件并平均加载它们所花费的时间来实现速度测试。如果由于某种原因出现错误，我想跳过加载该图像并继续下一个。如果错误发生在最后一张图像上，那么我想计算该点的平均速度并返回给调用者。

现在，一旦发生错误（我故意更改了图像的url，使其不存在），它就不会再进一步​​了。我尝试从 .onerror 函数返回 true，但没有运气。有什么建议么？

     var images = [{
            "url": 'http://<removed>250k.jpg?n=' + Math.random(),
            "size": 256000
        }, {
            "url": 'http://<removed>500k.jpg?n=' + Math.random(),
            "size": 512000
        }, {
            "url": '<removed>1000k.jpg?n=' + Math.random(),
            "size": 1024000
        }
    ];


function calculateBandwidth() {
    var results = [];
    for (var i = 0; i < images.length; i++) {
        var startTime, endTime;
        var downloadSize = images[i].size;
        var download = new Image();
        download.onload = function () {
            endTime = (new Date()).getTime();

            var duration = (endTime - startTime) / 1000;
            var bitsLoaded = downloadSize * 8;

            var speedBps = (bitsLoaded / duration).toFixed(2);
            var speedKbps = (speedBps / 1024).toFixed(2);
            var speedMbps = (speedKbps / 1024).toFixed(2);

            results.push(speedMbps);

            //Calculate the average speed
            if (results.length == 3) {
                var avg = (parseFloat(results[0]) + parseFloat(results[1]) + parseFloat(results[2])).toFixed(2);
                return avg;
            }
        }
        download.onerror = function (e) {
            console.log("Failed to load image!");
            return true;
        };
        startTime = (new Date()).getTime();
        download.src = images[i].url;
    }
}
4

1 回答 1

0

我认为您没有做的是在每个事件发生时控制过程。每个onerror并onload告诉您该过程已停止，而不是它本身应该退出。您初始化一个图像，它不加载，也许记下，否则继续。

问题是，你最后也会做同样的事情onload。也就是说，做任何测量，然后移动到下一个，或者，如果没有更多，运行清理和报告或诸如此类的脚本。

例如：

var site = 'http://upload.wikimedia.org/',
    imgs = [
    'wikipedia/commons/6/6e/Brandenburger_Tor_2004.jpg',
    'wikipedia/commons/a/ad/Cegonha_alsaciana.jpg',
    'wikipe/Cegonha_alsaciana.jpg',
    'wikipedia/commons/d/da/CrayonLogs.jpg',
    'wikipedia/commons/1/17/Bobbahn_ep.jpg',
    'wikipedia/commons/9/90/DS_Citro%C3%ABn.jpg',
    'wikipedia/commons/f/f0/DeutzFahr_Ladewagen_K_7.39.jpg',
    'wikipedia/commons/c/c7/DenglerSW-Peach-faced-Lovebird-20051026-1280x960.jpg',
    'wikipedia/commons/4/4d/FA-18F_Breaking_SoundBarrier.jpg'
];

我的图像数组。提示，wikipe/Cegonha_alsaciana.jpg不会加载。预先警告，它们很大并且加载缓慢，我使用缓存破坏器来保持它们onload的触发。

getimg();

在小提琴中，这一切都在一个window.onload事件处理程序中，所以当它被调用时，它会初始化进程。我本身没有设置阶段，否则我可能会调用它init()或setup().

function getimg() {
    var img = document.createElement('img'),
        path = imgs.shift();

    if (path) {
        img.onload = loaded;
        img.onerror = notloaded;
        img.src = site + path + '?cach=bust' + Math.floor(Math.random() * 9999);

        console.log('Loading ', img.src);

        document.body.appendChild(img);
    } else {
        console.log('Finished loading images.');
    }

    function loaded(e) {
        console.log('Loaded ', e.target.src);
        next();
    }

    function notloaded(e) {
        console.log('Not loaded ', e.target.src);
        next();
    }

    function next() {
        console.log(imgs.length, ' imgs left to load.');
        getimg();
    }
}

http://jsfiddle.net/userdude/vfTfP/

这可以做你想做的事情，没有内置的计时机制。我可以将事情分解为步骤、动作和事件，以便我可以根据需要控制这些步骤。基本上，您的脚本的运行方式应该不会有太大的不同。

于 2013-03-27T00:59:52.467 回答