CODEWITHSUNDEEP
javascript
Suleman Ahmad
Suleman Ahmad

Reputation: 2113

JS 'onload' function calls infine time

If we replace onclick event with onload, then why bulb is keeping on and off infinite time ? Here is example from w3schools, just replace onclick with onload and submit code.

Example:-

<!DOCTYPE html>
<html>
<body>
<script>
function changeImage() {
    element = document.getElementById('myimage')
    if (element.src.match("bulbon")) {
        element.src = "pic_bulboff.gif";
    } else {
        element.src = "pic_bulbon.gif";
    }
}
</script>

<img id="myimage" onload="changeImage()"
src="pic_bulboff.gif" width="100" height="180">

<p>Click the light bulb to turn on/off the light</p>

</body>
</html>

Upvotes: 0

Views: 184

Answers (3)

user1636522
user1636522

Reputation:

Roughly,

on "page" load :

<body onload="...">

on "image" load :

<img onload="..." />

Upvotes: 1

Niet the Dark Absol
Niet the Dark Absol

Reputation: 324640

The onload event of an image fires every time an image is successfully loaded. This means if you change the src, then a new image will be loaded into the <img> "container" and will trigger an onload (or onerror) when it is done.

You must remove the event handler. this.onload = null; will do it. (Assuming you are inside your even handler - in this case, you'd need to do onLoad="changeImage(); this.onload = null;", or adjust your code in the function.

Upvotes: 3

Adassko
Adassko

Reputation: 5343

because it's infinetely loading new image

just add

element.onload = undefined;

to your function

Upvotes: 0

Related Questions