Ladda in en bild med superenkel preloader

JavaScript

3 svar · 257 visningar · startad av oskob

Medlem sedan maj 20021 558 inlägg
Trådstart#1

Jag omformulerar min fråga:

Hur skriver man för att ladda en bild dynamiskt med "var myImage = new Image;" och sen vänta tills den laddats klart för att då visa den.

Medlem sedan maj 20021 558 inlägg
#2

Det jag vill är att den ska skriva ut lite kod när man klickar som visar en gif som visar att den laddar, sen när den är laddad ska giffen bort och bilden in.

Medlem sedan dec. 20025 483 inlägg
#3
<script type="text/javascript">

function showImg(src){
  var elm = document.getElementById("loader");
  elm.style.visibility = "visible";

  var img = new Image();
  img.onload = function(){
    elm.style.visibility = "hidden";
    document.images["img"].src = this.src;
  }
  img.src = src;
}

</script>

<div id="loader" style="visibility:hidden;position:absolute;width:200px;height:100px;left:50%;top:50%;margin-left:-100px;margin-top:-50px;border:2px solid #777;background-color:#eee">Laddar-bild här</div>
<a href="javascript:showImg('foo.png')">Visa bild</a>

<img src="" name="img">
Medlem sedan maj 20021 558 inlägg
#4

Ah! img.onload var det jag sökte :)

278 ms totalt · 4 externa anrop · v20260731065814-full.d34c6d5a
132 ms — deklarationer (db)
0 ms — hämta statistik (cache)
139 ms — hämta tråd, inlägg och bilagor (db)
136 ms — ändringar (db)