bilder-button-nachladen.php

Quell Code

<style>
  .bilder_einstellungen{
  width:200px;
}
  
</style>
<div id="info"></div>
<div id="ausgabe">
  <img class='bilder_einstellungen' src='http://sebastian1012.bplaced.net/bilder/2222.jpg'>
</div>
<button id="mehr">weitere Bilder laden</button>

<script>
  bilder=['http://sebastian1012.bplaced.net/bilder/2.jpg','http://sebastian1012.bplaced.net/bilder/3.jpg','http://sebastian1012.bplaced.net/bilder/4.jpg','http://sebastian1012.bplaced.net/bilder/5.jpg','http://sebastian1012.bplaced.net/bilder/6.jpg','http://sebastian1012.bplaced.net/bilder/7.jpg','http://sebastian1012.bplaced.net/bilder/8.jpg','http://sebastian1012.bplaced.net/bilder/9.jpg','http://sebastian1012.bplaced.net/bilder/10.jpg','http://sebastian1012.bplaced.net/bilder/11.jpg','http://sebastian1012.bplaced.net/bilder/12.jpg'];

var g=0;
var mehrladen=2;  
var mehrbutton=document.getElementById('mehr');
var inf=document.getElementById('info');

mehrbutton.innerHTML=mehrladen+' weitere Bilder laden';
mehrbutton.addEventListener('click',function(){
schonda=document.getElementById('ausgabe');

   for(f=0;f<mehrladen;f++){
     tagimg=document.createElement('img');
     tagimg.src=bilder[g];
     g++;
     tagimg.className='bilder_einstellungen';
     schonda.appendChild(tagimg);
   }
   inf.innerHTML=(g+1)+' von '+(bilder.length+1)+' geladen';
})   
</script>