Bilder zufällig wiedergeben

N

Nerlich

Mitglied
Hallo
Ich habe mir folgenden Code ein wenig zusammen gebastelt, nur leider hab ich das Problem das wenn man machmal auf aktuallisieren klickt, nicht ein neues Zufallsbild geladen wird, sondern genau das gleiche noch mal. Es soll aber so sein das jedesmal wenn man auf aktuallisieren drückt ein neues Bild geladen wird von dennen die vorhanden sind.

Viellicht könnt ihr mir ja weiterhelfen!
Hier der Code!
Code: 
<script type="text/javascript" language="JavaScript">
<!--
// erzeugt Zufallszahl kleiner gleich Bilderanzahl
today=new Date();
jran=today.getTime();
var anzahl = 3;     // Anzahl der Bilder
var random_number="";
var image="";
var text_color="";
ia=9301;
ic=49297;
im=233280;
jran = (jran*ia+ic) % im;

random_number = Math.ceil( (jran/(im*1.0)) * anzahl);

// läd ein Image abhängig von der Zufallszahl

if (random_number==1) {
text_color="000000";
image="1.JPG";
text="test1"
}
if (random_number==2) {
text_color="#FF0000";
image="2.JPG";
text="test2"
}
if (random_number==3) {
text_color="#FF0000";
image="3.JPG";
text="test3gfgfdggggggggggggggggggggggggggggggggggggggggggdfgdfgfdg"
}

function zufallsbild() {
document.write("<img src='" + image + "' width='361' height='259' border='1' alt='Text'><br><br>")
document.write("<font color=#" + text_color +"'>" + text + "</font><br>")
return
}

// -->
</script>
<div align="center">
<script type="text/javascript" language="JavaScript">
<!--
zufallsbild();
//-->
</script>
<br>
  <br>
  

    <script type="text/javascript" language="JavaScript">
<!-- Begin
document.write('<form><input class="sende" type=button value="  Next " onClick="history.go(0)"></form>')
//  End -->
  </script>
  </div>
</div>
 
Wenn Du das gleiche Bild wieder anzeigen willst was angezeigt wurde oder eben nicht benötigst Du Cookies, wo Du dann die notwendige Information reinspeicherst.

2. Alternative Ajax Request und Session starten Serverseitig und dort die Information reinspeichern.

Aber bei sowas würde ich den Cookie empfehlen ist denk ich weniger aufwendig und schont den Server.

http://www.html-world.de/artikel/art_j15.php hier findest Du etwas zu Cookies.
 
sry kenn mich mit Cockies leider nicht aus...
könnt ihr mir helfen?!
Wie müsste es aussehn in meinem Quellcode?!
Ich versteh die Seite die du mir geschickst hast schon eigentlich, allerding weis ich absolut nicht wie ich das umsetzen soll!

Danke im Vorraus
 
Mhm ich hab mal in deinen Quellcode kurz reingeschaut und dann wieder geschlossen , sry 0 Struktur nen bissel kompliziert da noch durchzublicken ;)

Hier wäre mal die Variante wie ich das machen würde. Der Cookie wäre in dem Fall 1 Tag gültig.

Code: 
<html>
    <head>
        <script type="text/javascript">
            var images = 10;
            
            function holeKeks () {
                if(document.cookie) {
                    return /lastImageNumber=([0-9]+)/i.exec(document.cookie);
                } 
                return false;
            }
            
            function setzekeks(wert) {
                var date = new Date();
                var ablauf = new Date(date.getTime()+1000*3600*24);
                document.cookie = 'lastImageNumber='+wert+
                                  ';expires='+ablauf.toGMTString()+';';
            }
            
            function loadImage () {
                var kekswert = null;
                var num      = null;
                
                if( (kekswert = holeKeks() )) {
                    //cookie war bereis gesetzt
                    do {
                        num = Math.round(Math.random()*images);
                    } while (num == parseInt(kekswert[1]));                    
                } else {
                    num = Math.round(Math.random()*images);
                }                  
                setzekeks(num);

                //bild kann nun eingebunden werden der Wert wäre num
            }
            
            window.onload = function () {
                loadImage();
            }
        </script>
    </head>
      <body>
      </body>
</html>

Nicht erschrecken nun das ist es mal wie ich es nun komplett gemacht habe , ebenfalls gleich zum austesten der ScriptStartup Funktion.

Die ersetzt mir das window.onload im speziellerin Sinne , das ScriptStartup.addLoad(func,true); startet die Funktion wenn der DOM geladden ist dann muss man nicht so lange warten bis das Bild mal da ist.

Der Vorteil gegenüber deiner Variante wäre , hat man kein JS aktiviert sieht man nun dennoch 1 Bild. Hat man es an , wird wenn der DOM fertig ist , das angezeigte Bild rausgehaun und nen neues eingesetzt.

Code: 
<html>
    <head>
        <script type="text/javascript">
            /*
                                  * für das starten von Scripten
                                  */  
            var ScriptStartup = (
                function () {
                    var doml = new Array(); // dom loaded
                    var winl = new Array(); // window loaded
                    var doml_scripts_ready = true;
                    var window_ready       = false;
                                
                    var browser = {
                        safari:/WebKit/i.test(navigator.userAgent),
                        ie:/MSIE/i.test(navigator.userAgent),
                        ff:/Firefox/i.test(navigator.userAgent),
                        opera:/Opera/i.test(navigator.userAgent)
                    }
                                
                    function initLoadingUntilDomReady () {
                        doml_scripts_ready = false;
                            if(browser.ie) {
                                document.onreadystatechange = function () {
                                if(document.readyState == 'interactive')
                                     window.setTimeout(startUpDomLoaded,1); // der IE will das wohl lieber so -.-
                            }
                        } else if (browser.ff || browser.opera) {
                            if(document.addEventListener)
                                document.addEventListener('DOMContentLoaded',startUpDomLoaded,false);
                        }
                    }
                                
                    function initLoadingUntilWindowReady () {
                        window.onload = function () {
                            window_ready = true;
                            for(var i = 0 ; i < winl.length;i++) winl[i]();
                        }
                    }
                                
                    function startUpDomLoaded() {
                        for(var i = 0 ; i < doml.length;i++) doml[i]();
                        doml_scripts_ready = true;                        
                        if(window_ready) startUpWindowLoaded();
                        else             initLoadingUntilWindowReady();
                    }
                                
                    function startUpWindowLoaded () {
                        if(!doml_script_ready) return;
                        for(var i = 0 ; i < winl.length;i++) winl[i]();
                    }
                                
                    return {
                        /**
                                                                  * Ladevorgang für script starten 
                                                                  * @access public
                                                                 * @params Object func                               // function
                                                                 * @params boolean DOMLoaded                 // start Script Function if DOMLoaded
                                                                 * @return void
                                                                 */
                        addLoad:function(func,DOMLoaded){                            
                            if(DOMLoaded && (browser.ie || browser.ff || browser.opera) ) {
                                doml.push(func);
                            } else {
                                winl.push(func);
                            }
                        },
                        initLoad:function () {
                            if(doml.length > 0) initLoadingUntilDomReady() ;
                            else                initLoadingUntilWindowReady() 
                        }
                    }
                }
            )();
            
            /*
                                  * das eigentliche Hauptprogramm
                                  */
            var images = new Array();
                images.push('http://images.amazon.com/images/G/03/videogames/features/bts_space.JPG?');
                images.push('http://home.arcor.de/akapes/potp/pes/download/space1600x1200.jpg?');
                images.push('http://apod.nasa.gov/apod/image/0710/smc_guisard_big.jpg?');
                                  
            function holeKeks () {
                if(document.cookie) {
                    return /lastImageNumber=([0-9]+)/i.exec(document.cookie);
                } 
                return false;
            }
                        
            function setzekeks(wert) {
                if(!wert && wert != 0) return;
                var date = new Date();
                var ablauf = new Date(date.getTime()+1000*3600*24);
                document.cookie = 'lastImageNumber='+wert+
                                  ';expires='+ablauf.toGMTString()+';';
            }
            
            function loadImage () {
                var kekswert = null;
                var num      = null;
                
                var img = document.getElementById('headerimage');
                    img.src = '';
                
                if( (kekswert = holeKeks()) ) {
                    //cookie war bereis gesetzt
                    do {
                        num = Math.round(Math.random()*(images.length-1));
                    } while (num == parseInt(kekswert[1]));                    
                } else {
                    num = Math.round(Math.random()*(images.length-1));
                }            
                setzekeks(num);
                
                //bild kann nun eingebunden werden der Wert wäre num
                img.src = images[num];
            }            
            
            ScriptStartup.addLoad(loadImage,true);
            ScriptStartup.initLoad();
        </script>
    </head>
    <body>
        <img src="bild1.jpg?" height="200px" width="200px" id="headerimage"></img>
    </body>
</html>
 
Zuletzt bearbeitet:
Hi Fips,

interessanter Ansatz!

Allerdings gibt mit der IE bei geladenem Dokument nicht "interactive" sondern "complete" zurück. Vielleicht die Bedingung dahingehend ändern, dass beide Varianten greifen.
Code: 
if((document.readyState == 'interactive') || (document.readyState == 'complete'))

[EDIT]
Ich muss das oben Geschriebene noch erweiteren bzw. abändern.

Der IE ab Version 7 kommt mit der ODER-Verknüpfung in die Verlegenheit, die onreadystatechange-Funktion zweimal aufzurufen. Lösung könnte hier ein Versionstest bieten.
Code: 
var strCompare = (Number(navigator.appVersion.split(";")[1].substr(6)) >= 7)? "interactive" : "complete";
if(document.readyState == strCompare)

Ciao
Quaese
 
Zuletzt bearbeitet:
Naja ich muss dazu sagen die ganze Idee kam nicht komplett von mir hab bei Dean Edwards geschaut wie die das gemacht haben , die binden aber ein Script Tag ein und geben diesem Script ein Attribut noch mit hinzu.

<script type="text/javascript" defer src="xyz"></script> Dieses sagt dem Internet Explorer das das DOM fertig ist.

Nen anderer hat mit hilfe eines Timeouts alle 50 millisekunden geschaut ob die ID footer bereits belegt ist.

Diese Anweisung document.onreadystatechange hab ich dann woanders gefunden und dieses verwendet.

Wobei dieses bei mir funktioniert , onreadystatechange.readyState == interactive sollte sein das das der DOM geladen ist ohne Bilder etc. Bei complete hat er alles geladen.

Beim Safari , da gibt es auch noch readyState aber das onreadystatechange fehlt mir readyState = loaded selbiges wie interactive und readyState = complete , und alle 10 millisekunden ne Funktion aufrufen mhm naja.

Also so das wir 2 Möglichkeiten haben sollten nun

starte Funktion wenn DOM geladen
starte Funktion wenn alles geladen

und davon beliebig viele.

MfG :)

Aber das muss ich auch nochmal richtig austesten der IE ist eh ne Krankheit.

Nachtrag :

Also sollte es beim IE so sein das die Funktion onreadystatechange eh 2 mal aufgerufen wird , interactive oder alles im cache complete

Code: 
if(document.readyState == 'interactive') {
   ...
} else if (document.readyState == 'complete') {
   ...
}

Sowas in die Richtung eventuell , das oder ist so ne Sache da läuft er 2 mal rein gesammt und beide male ist eine Anweisung wahr :/
Wobei ich auch nur im IE 7.0 getestet habe werde mich nochmal an den IE 6.0 setzen müssen.
 
Zuletzt bearbeitet:
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück