object.onload fails with IE and Edge

Question

I'm trying to dynamically preload list of files which may be anything between images and JavaScript files. Everything is going supersmooth with Chrome and Firefox, but failing when I'm trying to preload JavaScript files with Edge. Edge still can handle images for example but no js files. And yes I've tried with addEventListener, it's not working either.

Edge doesn't give me any errors.

    var object = {};
    object = document.createElement('object');
    object.width = object.height = 0;
    object.data = path/to/javascriptfile.js
    body.appendChild(object);

    object.onload = function(){
         console.log('hello world')
         //not firing with edge
    }

Anything relevant I'm missing?

UPDATE: Didn't get any success after the day. Will probably leave it for now and just skip preloading script files with edge until i find a solution.

Answer 1

Perhaps worth a check - from msdn:

The client loads applications, embedded objects, and images as soon as it encounters the applet, embed, and img objects during parsing. Consequently, the onload event for these objects occurs before the client parses any subsequent objects. To ensure that an event handler receives the onload event for these objects, place the script object that defines the event handler before the object and use the onload attribute in the object to set the handler.

https://msdn.microsoft.com/en-us/library/windows/apps/hh465984.aspx

Edit, a clarification:

You should attach the event listener before the element is added to the page.

Even doing that I'm not sure if it'll work or not though. But to make sure you've exhausted all options try the example below:

function doLoad() {
   console.log('The load event is executing');
}

var object = {};
object = document.createElement('object');
object.width = object.height = 0;
object.data = 'path/to/javascriptfile.js';

object.onreadystatechange = function () {
   if (object.readyState === 'loaded' || object.readyState === 'complete') doLoad();
   console.log('onreadystatechange');
}

if (object.addEventListener) { 
   object.addEventListener( "load", doLoad, false );
   console.log('addEventListener');
}
else 
{
   if (object.attachEvent) { 
      object.attachEvent( "onload", doLoad );
      console.log('attachEvent');
   } else if (object.onLoad) {
      object.onload = doLoad;
      console.log('onload');
   }
}

var body = document.getElementsByTagName("body")[0];    
body.appendChild(object);

If this doesn't work, you could perhaps preload using "image" instead of "object" in IE: https://stackoverflow.com/a/11103087/1996783

Answer 2

Working temporary solution is to put onload event directly to script element instead of object. It's sad since it works like a charm in Chrome & FF.

It turns out, object.data with css source did not load either. I don't know if it's a bug since it still can load image from to object.data.

But show must go on.

Cheers, eljuko