IE issue with addEventListeners

JavaScript
1

I have a script running that includes this statement:

if (!window.isLoaded) {
    window.addEventListener("load", function() {
        threeSixty.init();
    }, false);
}

The script works fine everywhere except in good old Internet Explorer. The IE error message points to the ‘if’ statement above.
I’m reading that IE does not play nice with addEventListener and needs to be adjusted with perhaps ‘attachEvent’ to accomodate IE.

I’m reading and tinkering but can’t seem to get it sorted.
Does anyone have any idea how to get this to play nice with IE?
Thanks for any input!

2

The best way in your situation is to not use the load event at all. Just put your script tag at the end of the body, and you won’t need to deal with onload situations.


<body>
    ...
    <script src="js/script.js"></script>
</body>
3

Hi Paul, thanks for the reply.

Allow me to back away and give you a bigger picture. :slight_smile:

Below is everything in one of the seven different JS files.
Does your recommendation above still apply?

threeSixty = {
    init: function() {
        this._vr = new AC.VR('viewer', './images/image_##.jpg', [24,12],
		{initialPos: [12,1]},
            {invert: true}
        );
    },
    didShow: function() {
        this.init();
    },
    willHide: function() {
        recycleObjectValueForKey(this, "_vr");
    },
    shouldCache: function() {
        return false;
    }
}

if (!window.isLoaded) {
    window.addEventListener("load", function() {
        threeSixty.init();
    }, false);
}

Say hi to Antony for me!

4

With very few exceptions all JavaScript should be attached at the bottom of the web page and not test for the load event.

The only time a script needs to test for the load event is if it is testing if all the images and/or other files have actually loaded in order to do something else if any didn’t load.

The only time a script shouldn’t be attached at the very bottom of the page is where it is making a decision on whether to display the page at all or to instead load another page (or reload the same page outside a frame).

5

Thanks Felgall!

I’m not sure that my page isn’t doing what you just described as the exceptions.
We took a CAD 360 interactive view and exported it into a webpage.
It’s actually a bunch of individual jpgs that are utilized in sort of a flip-book effect.

You can see it HERE.

The export spit out 2 html files, 6 CSS file, 288 jpgs and 7 JS files.
That’s why I was trying not to mess with it too much.

I’ll tinker around with what you’re telling me and see what I can make happen.

6

If the script is simply using the images and isn’t going to do something different if they are not there then it doesn’t really need to test if all the images have loaded before it starts.

7

Just for the record, (and not to dismiss the onload issue), as I tiptoe warily betwixt the legs of JS colossi I thought I’d mention that IE8 and under don’t support addEventListener, but there is a function that is designed to help IE along:


function addEvent(obj, type, fn) {
  if ( obj.attachEvent ) {
    obj['e'+type+fn] = fn;
    obj[type+fn] = function(){obj['e'+type+fn]( window.event );};
    obj.attachEvent('on'+type, obj[type+fn] );
  } else {
    obj.addEventListener( type, fn, false );
  }
}

With that in place, instead of


if (!window.isLoaded) {
  window.addEventListener("load", function() {threeSixty.init();}, false);
}

you would use this


if (!window.isLoaded) {
  addEvent(window, 'load', function() {threeSixty.init();})
}

I may not have that code quite right, but anyhow, it’s something like that. :slight_smile: