i'm trying implement speedtest downloading 3 image files internet, , averaging time took load them. if there error whatever reason, want skip loading image , proceed next one. if error occurs on last image, want calculate average speed @ point , return caller.
right now, once error occurs (i deliberately changed url of image doesn't exist), won't go further. i've tried returning true .onerror function, no luck. suggestions?
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 = []; (var = 0; < 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 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 load image!"); return true; }; starttime = (new date()).gettime(); download.src = images[i].url; } }
i think you're not doing controlling process each event occurs. each onerror
, onload
tells process stopped, not should quit per se. initialize 1 image, doesn't load, maybe take note, otherwise continue.
the thing is, you same thing @ end of onload
too. is, whatever measurements, move next or, if no more, run script cleans , reports or whatnot.
for instance:
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' ];
my array of images. hint, wikipe/cegonha_alsaciana.jpg
won't load. forewarned, these large , load , use cache buster keep them firing onload
s.
getimg();
in fiddle, within window.onload
event handler, when gets called, initializes process. don't have setup phase, per se, or otherwise might have called init()
or 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 load.'); getimg(); } }
http://jsfiddle.net/userdude/vftfp/
this you're trying do, without timing mechanism built-in. can break things off steps, actions , events, can control steps necessary. in basic way, script should not run differently.
Comments
Post a Comment