Non-independence of two javascript scripts

Question

He Guys,

I have two scripts that work fine separately. One is for loading images and one is for loading Youtube iframe embeds.

However they don't seem to work together. Could you help out?

<iframe width="560" height="315" frameborder="0" data-src="https://www.youtube.com/embed/fKnbOJ4NAvS" src=""></iframe>

<a rel="nofollow" target="_blank" href="https://plus.google.com/share?url=https%3A%2F%2Fwww.domain.com"><img src="data:image/png;base64,R0lGODlhAQABAAD/ACwAAAAAAQABAAACADs=" data-src="googleplus.png"></a>

<script>
function init() {
var imgDefer = document.getElementsByTagName('img');
for (var i=0; i<imgDefer.length; i++) {
if(imgDefer[i].getAttribute('data-src')) {
imgDefer[i].setAttribute('src',imgDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

<script>
function init() {
var vidDefer = document.getElementsByTagName('iframe');
for (var i=0; i<vidDefer.length; i++) {
if(vidDefer[i].getAttribute('data-src')) {
vidDefer[i].setAttribute('src',vidDefer[i].getAttribute('data-src'));
} } }
window.onload = init;
</script>

Possible duplicate of [adding to window.onload event?](http://stackoverflow.com/questions/15564029/adding-to-window-onload-event) — Yosef Weiner, Apr 17 '16 at 16:18

score 0 · Answer 1 · answered Apr 17 '16 at 16:19

You have made a couple of invalid assumptions.

Firstly, all scripts occupy the same global name space. Multiple <script>...</script> tags are not independent, therefore.

<script>
//script 1
</script> 
<script>
//script 2
</script>

is equivalent to :

<script>
//script 1
//script 2
</script>

Secondly, repeated assignments of functions to window.onload are not cumulative. With window.onload = init followed by a second window.onload = init, the second assignment will override the first.

Now you should understand that your second script nullifies the first.

To fix, you could give the two functions unique names, and call them from a single (anonymous) window.onload handler :

<script>
function init_1() {
    var imgElements = document.getElementsByTagName('img');
    for (var i=0; i<imgElements.length; i++) {
        if(imgElements[i].getAttribute('data-src')) {
            imgElements[i].setAttribute('src', imgElements[i].getAttribute('data-src'));
        }
    }
}
function init_2() {
    var vidElements = document.getElementsByTagName('iframe');
    for (var i=0; i<vidElements.length; i++) {
        if(vidElements[i].getAttribute('data-src')) {
            vidElements[i].setAttribute('src', vidElements[i].getAttribute('data-src'));
        }
    }
}
window.onload = function() {
    init_1();
    init_2();
};
</script>

You could alternatively omit init_1() and init_2(), and write everything direcly inside an anonymous window.onload handler :

<script>
window.onload = function() {
    var imgElements = document.getElementsByTagName('img');
    var vidElements = document.getElementsByTagName('iframe');
    var i;

    for (i=0; i<imgElements.length; i++) {
        if(imgElements[i].getAttribute('data-src')) {
            imgElements[i].setAttribute('src', imgElements[i].getAttribute('data-src'));
        }
    }

    for (i=0; i<vidElements.length; i++) {
        if(vidElements[i].getAttribute('data-src')) {
            vidElements[i].setAttribute('src', vidElements[i].getAttribute('data-src'));
        }
    }
};
</script>

It is perfectly OK to reuse the variable i in this way.

You will notice that I renamed you variables to avoid "Defer", which has a very specific meaning in JavaScript.

Non-independence of two javascript scripts

1 Answers1