« MOPB: Monat der PHP-Bugs gestartet Review Meeting März 2007 »

fakeAjax Image Loader

2. März 2007 von Alexander Petri

Wer kennt nicht diese Bildergallieriescripte wie Lightbox etc.
Ich habe mich immer schon gefragt wie man einen einfachen Imageloader mit diesen tollen Ajax-Loader Bildern selber basteln kann.

Problem war: ich hatte eine Reihe von Links die in einer Gallerie auf Bilder verwiesen haben. Ich wollte nun ohne das die Seite neu geladen wird ein Bild austauschen und zwar erst nachdem es geladen wurde.
Hier nun die Lösung:

  1.  
  2. function ImageLoader(id,url){
  3. this.i = new Image();
  4. this.indicator = new Image();
  5. this.indicator.src=’ajax-loader.gif’;
  6. this.id = id;
  7. this.url = url;
  8. this.rand = Math.floor(Math.random()*100000000000); //cache verhindern
  9. this.imEl=document.getElementById(id);
  10. this.loadImage = function(){
  11. objRef=this;
  12. this.imEl.src=this.indicator.src;
  13. this.i.src=this.url+’?r=’+this.rand;
  14. objRef.waitForImage();
  15. };    
  16.  
  17. this.waitForImage = function(){
  18. if(objRef.i.complete){
  19. objRef.imEl.src=this.i.src;
  20. }else{
  21. setTimeout(’objRef.waitForImage()’, 100);
  22. }
  23. };
  24. }
  25. function lo(id,url){
  26. loa=new ImageLoader(id,url);
  27. loa.loadImage();
  28. }

hier die Source Dateien:
Loading Indicator
fakeAjax Image Loader Beispielhtml

auf Wunsch könnt Ihr die Zeilen mit dem random ausschalten.

Der Beitrag wurde am Freitag, den 2. März 2007 um 13:50 Uhr veröffentlicht und wurde unter Material, ajax, javascript abgelegt. Du kannst die Kommentare zu diesen Eintrag durch den RSS 2.0 Feed verfolgen. Du kannst einen Kommentar schreiben, oder einen Trackback auf deiner Seite einrichten.

4 Reaktionen zu “fakeAjax Image Loader”

  1. Alexander Petri
    Am 2. März 2007 um 13:54 Uhr

    Hab es in IE7 und FF1.5 getestet.

  2. Michael Finger
    Am 5. April 2007 um 16:40 Uhr

    Hi,
    im FF 2.0 geht es auch. Wirst du das noch weiter entwickeln?? oder ist das so schon fertig??, weil ich suche sowas einfaches für meine Seite, aber so das man dem Link auch folgen kann, wenn man Javascript abgeschaltet hat.

    MfG

    Michael Finger
    Holztechniker

  3. Tom
    Am 12. April 2007 um 08:07 Uhr

    Hi Alex, danke für dein Posting. Im Opera 9 geht das auch. Ich habe das mal adaptiert und noch eine Abfrage eingebaut die guckt, ob das Bild schon per Cache vorhanden war (und somit den Random entfernt). Dazu kam nochmal ein wenig jQuery Zuckerguss, der sich prima dazu eignet, das auch ohne Javascript funktionsfähig zu halten. Live-Beispiele: Mit 2 Bildern, mit 4 Bildern und mit 6 Bildern.

    Die Modifikation erstreckt sich auf den Teil der das Bild einlädt. Hier wird einfach geprüft, ob das Bild bereits fertig ist. Falls ja wird sich das waiting gespart (prdimg01.js).

  4. artnorm // tunnelblick // simply perfect slim /// // /
    Am 12. April 2007 um 08:55 Uhr

    [...] finally nifty update on elbtunnel.com: Inspired by Alex Petri’s fakeAjax Image Loader a Product Image Gallery was created. Damn me luuv jQuery! Additionally another niche loading Image [...]

Einen Kommentar schreiben

5.0 Jahre Badge