Question

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

现在，一旦发生错误（我故意改变图像的网址以使其不存在），它就不会再进一步了。我试过从.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;
    }
}

Answer 1

我认为你没有做的是在每个事件发生时控制过程。每个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/

如果没有内置的计时机制，这就是您尝试做的事情。我可以将事情分解为步骤，动作和事件，以便我可以根据需要控制步骤。从基本的角度来看，您的脚本运行方式不应该大不相同。

javascript压制错误并继续for循环

1 个答案: