How to not let an image load in javascript

Question

I have one more page I just want her images to load when the user executes an action. Have some function in javascript or jquery to do this ?

Answer 1

You can leave the image with style="display: none" and change to style="display: block" when its function is executed.

function funcaoExibir(){
  img.style.display='block';
}

function funcaoOcultar(){
  img.style.display='none';
}

Botão que aciona função para exibir imagem: <input type='button' onclick='funcaoExibir()' value='click.me'></br>
Botão que aciona função para ocultar imagem: <input type='button' onclick='funcaoOcultar()' value='click.me'></br>
<img id='img' src="http://big.assets.huffingtonpost.com/pikatchuto.gif" style="display: none" >

---

You can also delay image loading by using a document.createElement('img'); and assigning the src after the execution of the function you want, so:

var i = 0;

function criarImagens(){
  i++;
  var img = document.createElement('img');
  img.id = 'img'+i;
  img.src = 'http://big.assets.huffingtonpost.com/pikatchuto.gif';
  document.body.appendChild(img);
}

Botão que cria a imagem dinamicamente: <input type='button' onclick='criarImagens()' value='click.me'></br>

If your images follow a numerical order, in src you could assign so: img.src='pathDasImagens/img'+i+'.jpg';

---

Ai also goes a little of your creativity, if you want the images to be loaded with the scrolling of the page could do so:

var i = 0;

window.onscroll= function() {
  i++;
  var img = document.createElement('img');
  img.id = 'img'+i;
  img.src = 'http://big.assets.huffingtonpost.com/pikatchuto.gif';
  document.body.appendChild(img);
}

<div style="height:2000px;"></div>