Load image via javascript

Asked

Viewed 9,949 times

3

I tried to upload image by JS but I couldn’t do it through onload, follows the code I tried:

HTML:

<img  class="razer" id="imageoption" onload="imageOption()">

JS:

document.onload = function imageOption() {
document.getElementById("imageoption").src = "images/hyperx-option.png"; }
javascript html
  • 1

    I don’t understand what you want, the way it is src="images/hyperx-option.png" directly on tag. You can explain better what you want to do?

  • So, this page will have several tags depending on the option chosen in the previous page this carries a different mark, I was trying to hit this part of js with html but I could not make the image appear.

  • You don’t need javascript for this, try it like this: <img class="razer" id="imageoption" src="images/hyperx-option.png">

  • So it works perfectly, but when I access this same page with another previous option I want another image to appear

  • I think I’m beginning to understand your question, how does the new page identify which image to display? If you are browsing from one page to another you can pass data in case the src through the url or a form. What programming language are you using? Have you researched about GET/POST

4 answers

3

Another solution using Jquery

<img  class="razer" id="imageoption">

Script:

$(document).ready(function(){
     $('#imageoption').attr('src','images/hyperx-option.png');
   });

Once the document is loaded, it will assign the src set to the image.

2


The event onload cannot be accessed by document it has to be accessed directly by window ,as shown in the code below.

window.onload = function imageOption() {
    document.getElementById("imageoption").src = "images/hyperx-option.png";
}

Some of the Javascript events are only accessible by window ,as well as the onload.

  • Vlw!! It worked

0

The function in onload="imageOption()" will never be called with src empty. THE onload is fired just when something is loaded. With the src emptiness, that something is non-existent.

What you can do is change the src image when DOM is ready:

document.addEventListener("DOMContentLoaded", function(){
   document.getElementById("imageoption").src = "https://www.cleverfiles.com/howto/wp-content/uploads/2016/08/mini.jpg";
});
<img src="" class="razer" id="imageoption">

-1

Javascript

function imageOption(){
   document.getElementById("imageoption").src = "images/hyperx-option.png";
}

HTML

<body onload="imageOption()">
<img  class="razer" id="imageoption" src="" />

If you want the image to be replaced dynamically by Javascript use setTimeout within the end of the function:

function imageOption(){
   document.getElementById("imageoption").src = ; // coloque a variável das condições que vai mudar a imagem
   setTimeout(function(){ imagemOption(); }, 10000); //intervalo de 10 segundos
}

  • A small Jscript remark is a variation of Javascript , ie ,these languages are not the same thing.

  • Thank you for correcting

Browser other questions tagged javascript html

You are not signed in. Login or sign up in order to post.