2 window.onload in 2 separate .js files, only 1 function loads

Question

I have 2 external JavaScript files which both call functions via window.onload. The files conflict, so only the second js file is working.

How would I fix the window.onload so both functions work? Should I do this in the HTML file or can I fix it in one of the js files?

The HTML header is:

<link type="text/css" rel="stylesheet" href="house.css" />
<style type="text/css"></style>
<script type="text/javascript" src="slideshow_library.js"></script>
<script type="text/javascript" src="slideshow.js"></script>
<script type="text/javascript" src="house.js"></script>

house.js:

    var $ = function(id){
    return document.getElementById(id);
}

var calculateClick = function() {
    console.log("click, calculate click is running");
    //blahblahblah, lots of code
}

window.onload = function(rental){
    console.log("onload, javascript is running");
    console.log(rental);

    $("calculate").onclick = calculateClick;
}

Second window.onload is in 2 js files:

slideshow.js:

var slideShow;

window.onload = function (slideShow) {
    var params = {
        //blahblahblah lots of code
    }
}

slideshow_library.js:

var $ = function(id) { 
    return document.getElementById(id); 
}

var SlideShow = function( params ){
    //blahblah blah even more code
} 
SlideShow.prototype.displayImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.displayNextImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.displayPreviousImage = function(){
    //blahblah blah even more code
}
SlideShow.prototype.togglePlay = function(){
    //blahblah blah even more code 
}

score 12 · Answer 1 · answered Jul 20 '14 at 04:16

12

Don't use the old window.onload event model. That is not very flexible — as you've noticed — and not necessary for browser support any more.

jQuery makes this easy; change window.onload = function to $(function) in each JS file.

Pure JS solution: change that to window.addEventListener('load', function).

answered Jul 20 '14 at 04:16

rvighne

20,755
11
51
73

What if you were to combine the two javascript files, how do you do that? I have an onload on 1 file, but not in the other. (And I want to bundle all of my javascript files) – ganders Feb 03 '15 at 06:17
@ganders: If one file is wrapped in an onload and the other isn't, then you can just concatenate the two files. – rvighne Feb 06 '15 at 04:39

score 0 · Answer 2 · edited Feb 06 '15 at 04:40

If you are allowed/familiar to use JQuery, it would have been done like:

$(window).on('load', function() {
    //<-- do the rest here..
});

If you are still looking for pure js, try this example, its not on window.onload instead it uses document.readyState:

first.js

(function(window, document) {
    var t = setInterval(function() {
        if('complete' === document.readyState) {
            clearInterval(t);
            alert('first js loaded ...');
        }
    }, 10);
})(window, document);

last.js

(function(window, document) {
    var t = setInterval(function() {
        if('complete' === document.readyState) {
            clearInterval(t);
            alert('last js loaded ...');
        }
    }, 10);
})(window, document);

Find the git repo here

2 window.onload in 2 separate .js files, only 1 function loads

2 Answers2