How not to leave an image to load in javascript

Navigation
0

I have one more page just want her images to load when the user performs an action. Are there any javascript or jquery functions to do this?

    
asked by anonymous 20.07.2015 / 15:33

1 answer

1

You can leave the image with style="display: none" and change to style="display: block" when your function runs. 

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 loading the image by using a document.createElement('img'); and assigning the src after executing the function you want, like this: 

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 them like this: img.src='pathDasImagens/img'+i+'.jpg';

There's also a little of your creativity, if you want the images to be loaded with the page scroll, you could do this: 

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>
    
20.07.2015 / 15:45
Create search tags for Select2 Roll the page vertically wait and roll again