I’ve been using the well-loved ‘addLoadEvent’ function to run JS functions on page load for some years, without any problems at all. In a new site I’m trying to run TWO functions on load:
No problem in Firefox8, but I’ve got a problem in IE7 (and IE8, but not IE9). IE7 will run whichever of those functions I place first, and ignore the second.
‘setDivBg’ sets a coloured background on the included contents. It’s different for every page as I want my client to see some alternatives. It’s preferable that it runs before ‘setSlideLinks’ which is setting up eventhandlers for the slide-shows. But I need both to work.
Two things are different from my normal practice:
For the first time (for me) I’ve put parameters into the function calls in ‘addLoadEvent’, and
The script is placed at the bottom of an included ‘page contents’ file because the parameters for the ‘setDivBg’ function vary from page to page. Normally I place ‘addLoadEvent’ in the template header.
The ‘addloadEvent’ function is completely standard:
function addLoadEvent(func) {
var oldonload = window.onload;
if (typeof window.onload != 'function') {
window.onload = func;
} else {
window.onload = function() {
oldonload();
func();
}
}
}
The site (still in development) may be seen here
I can’t see why this should make IE7 choke, and I am continuing to investigate; maybe it’s just one of those things about IE. Can anyone help here, please ?
I have now found a solution, not quite so elegant, but it appears to work (subject, as always, to further testing). The following goes at the bottom of the pages (I’ve left the original code, pro tem, commented out):
This doesn’t seem to have any serious disadvantages, and if there is any problem with parameters in ‘addLoadEvent’ it gets around that. I haven’t uploaded that change to the link in my original posting yet. If anyone can throw light on why the original failed, I’d be most grateful.
function Init(){
addLoadEvent(setSlideLinks('img/'));
addLoadEvent(setDivBg('main','orangebg'));
}
if (window.addEventListener){
window.addEventListener('load',Init, false);
}
else if (window.attachEvent){
window.attachEvent('onload',Init);
}
There is no point in using the load event to call addLoadEvent. It appears to work because the parameters being passed to addLoadEvent are incorrect. addLoadEvent expects a function reference as a parameter, not a return value from a function call.
Your suggestion addresses the difference between IE and other browsers in the way that they set event listeners, but that’s not the problem. My ‘setSlideLinks’ function runs in both Firefox and IE7 already. It sets a link with straightforward onclick event handler on the thumbnail images (so that an enlarged image pops up when the thumbnail is clicked).
‘setDivBg’ changes the className of a division to change the background colour. It has nothing to do with event handlers.
The problem is that IE7 won’t run the two ‘addLoadEvent’ instances. It will always run whichever’s first. So either I get the background I want, or the slideshow works. But not both.
This still happens when I use the code you’ve suggested. So for now I’m sticking with using ‘addLoadEvent’ to run once and call another function (doOnloadStuff) which can then run both the required functions in the right order.
I still don’t understand why IE7 won’t run two instances of ‘addLoadEvent’, as I’d always thought that was half the point of the function. So maybe it’s the parameters I’ve added.
As I mentioned in my previous post, you must pass a function reference, otherwise the functions are being called instantly, making the result unpredictable.
I was struggling a bit over how to pass a funtion reference with parameters, but you have made it all clear to me now. It works perfectly. I did start out with:
but then I needed to add the parameters, and that’s where they ceased to be function references and became functions.
I’m glad to have learnt the correct way to do it. Thanks again.