Nur DIV reloaden, nicht ganze Seite

[TheOnly1]

Ich bastel gerade wieder an etwas rum und habe mal wieder ne Frage...

Ich habe auf einer meiner Seiten eine Bilderzufallswiedergabe realisiert:
http://www.zaaap.net/zaaapfun/

Dort wieder dann immer zufällig ein Bild aus einem Verzeichnis angezeigt.

Der Code dahinter ist:

Spoiler

[src=php]
<div style="text-align:center">
<div id="top">

⇓ Auf's Bild klicken für neues Zufalls-Bild! ⇓</div>

<div id="main">
<a href="#" onClick="window.location.reload();return false;"><div id="pics">
<?php
$Verzeichnis = "zfimages";
if($Verzeichniszeiger = opendir($Verzeichnis))
{
while($Datei = readdir($Verzeichniszeiger))
{
if(!is_dir($Datei))
{
$Dateien[] = $Datei;
}
}
closedir($Verzeichniszeiger);
}
echo"<img alt=\"ZaaaPfun!\" src=\"",
"../$Verzeichnis",
"/",
$Dateien[rand(0, count($Dateien)-1)],
"\">";
?>
</div>
</a>
</div>
</div>
[/src]

Ein Klick auf das Bild, bzw eigentlich das DIV, führt zu einem Reload der kompletten (Wordpress)Seite.
Was ich nun möchte ist, dass bei einem Klick nicht mehr die ganze Seite neu geladen wird, sondern nur noch das Pics-DIV mit einem neuen Zufallsbild neu geladen wird.

Ich habe aber leider keine Ahnung, wie ich das Umsetzen soll.
Ich in mir ziemlich sicher, dass man da in Richtung Ajax/jquery etwas machen kann, aber wie gesagt: Keine Ahnung wie konkret.

Über Hilfe würde ich mich freuen.

Nachtrag:
Ich merke gerade, dass da aktuell auch scheinbar irgendwo caching die Zufallswiedergabe unterwandert...
Ein Hard Refresh funktioniert, ein einfacher Klick oder nur F5 nicht.
Das hat aber mit der eigentlichen Frage -zunächst mal- nix zu tun. Nur zur Info.

 

[evillive]

Hier der Client

[src=html4strict]
<div id="main">
<img id = "my_image" src="bb.png">
</div>
<script src="jquery.js"></script>
<script>
function updatePic (obj) {
$("#my_image").attr("src", obj.img);
}


$("#my_image").click(function() {
$.getJSON(
"updatePic.php", // The server URL
{
img: $("#my_image").attr("src")
},
updatePic
);
});
</script>
[/src]


Hier der Server

[src=php]
<?php

header('Cache-Control: no-cache, must-revalidate');
header('Expires: Mon, 01 Jan 1996 00:00:00 GMT');
header('Content-type: application/json');

/// $_GET['img']; // der client schickt dem browser den namen des letzten bildes mit. falls dein zufalls generator die selbe zahl liefert wie vorher...
echo json_encode(array("img"=>"aa.jpg"));

[/src]


beim laden wird Bild bb geladen... und wenn man aufs bild klickt wird es durch bb ersetzt .. Verzeichnis auslesen usw. hast du ja schon ^^

ps im php code solltest du keinen echo verwenden, außer das eine was schon da ist

 

[LemonDrops]

Einfach die Bilder nummeriert benahmen und dann Zahlen generieren und damit ne neue URL generieren. Dann kann man zwar die Bildurls erraten, aber das dürfte raum relevant sein. Dafür ist es einfach und man hat keine Problem mit dem Caching. Caching ist übrigens wichtig und sollte nicht ausgehebelt werden.

 

[evillive]

damit man die Bildurl nicht erraten kann könnte man md5 verwenden.

aus 1.jpg wird dann c4ca4238a0b923820dcc509a6f75849b.jpg

1 -> c4ca4238a0b923820dcc509a6f75849b

 

[Shodan]

Zum Caching: Du benutzt Varnish 1.1 (Stable ist 4.0). Für 1.1 konnte ich nichts finden, aber aus der 2.1 Dokumentation, mit dem Vorbehalt, dass dies nur vielleicht gilt:

Varnish cares about the max-age parameter and uses it to calculate the TTL for an object.

“Cache-Control: nocache” is ignored

Du kannst caching für die Seite nutzen: Lad das erste Bild einfach auch mit Javascript. Die Ausgabe dessen Backends muss allerdings (richtig) konfiguriert sein, um nicht vom Accelerator gecached zu werden.

Mit dem was Lemon-Drops sagt kannst die Performance allerdings weiter verbessern: Wenn du die Bilder durchnummerierst, beim Erstellen der Seite das Maximum in das Script renderst und per Javascript nur die Bildnummer im src änderst, dann fällt der ajax request weg.
Nachteil ist dabei aber, dass die Nummerierung lückenlos sein muss. Außerdem werden neue Bilder erst sichtbar, wenn Varnish die Seite neu chaced. Bei einem hohen TTL kannst du diesem (z.B. im Upload Script) mitteilen, dass die Seite neu eingelagert werden soll.

 

[TheOnly1]

Also schon mal danke für die Anregungen.

Das Problem mit den Bildernamen ist, dass diese willkürlich sind, sprich keiner Logik folgen. Gerade sind die "zufällig" zwar durchgängig benannt, aber das liegt nur daran, dass ich diese neu hochgeladen habe und vorher per Batch nummeriert habe. In Zukunft kommen da immer wieder Bilder zu, die ohne Schema benannt sind.
Das war auch der Grund für meine ursprüngliche Vorgehensweise.
Gut...ich könnte die Bilder natürlich immer erst umbenennen und dann hochladen. Wenn das wirklich einen entscheidenden Vorteil bietet insgesamt, dann soll es so sein.


Jedenfalls habe ich mich überzeugen lassen und habe mit Hilfe von Google hier etwas mit -dem von mir ungeliebten- JS neues gebastelt:
http://www.zaaap.net/rand.html

[src=javascript]
<script type="text/javascript">
var myPath = 'zfimages/';
var myPrefix = 'ZaaaPnet_image';
var mySuffix = '.jpg';
var myImageCount = 963;
var randomNr = Math.round(1+(myImageCount * Math.random()));
var randomSrc = myPath + myPrefix + randomNr + mySuffix;
var randomImg = new Image();
randomImg.src = randomSrc;
</script>
</head>
<body>
<div style="text-align:center">
<a href="#" onClick="window.location.reload();return false;">
<img src="load.gif" id="zufallsbild-id" alt="" /></a>
<script type="text/javascript">
document.getElementById('zufallsbild-id').src = randomImg.src;
</script>
</div>
[/src]

Dazu muss man sagen, dass ich von JS quasi noch weniger Ahnung habe...
Also: Das funktioniert im Prinzip schon sehr schön und auch das Caching ist da kein Problem mehr.

Aber:
1. Wie nötige ich es neben jpg auch jpeg, png und gif zu nehmen?
2. Muss ich die Anzahl der Dateien jetzt jedesmal anpassen? Vermutlich kann man die Anzahl auslesen und übergeben, aber das ist nur ne Vermutung.
3. Im Prinzip sind wir nun wieder am Ausgangspunkt, denn es wird die komplette Seite neu geladen.

 

[Shodan]

Wenn das wirklich einen entscheidenden Vorteil bietet insgesamt, dann soll es so sein.

Entscheidend ist eine Frage der Prioritäten ;-)

Wenn du die Bild URLs auf dem Client erstellen lassen kannst, spart das einen Ajax Request und der Server muss weniger Arbeiten. Dafür musst du aber eine klare Schnittstelle haben, welche URLs möglich sind und welche nicht. Diese musst du erstellen, und pflegen. Ordentliche Upload/Delete Skripte erledigen das, aber sie zu implementieren ist Aufwand.
Lässt du dir URLs auf dem Server erstellen, kannst du bei jeder Anfrage nachsehen, was du an Bildern zur Verfügung hast. Die Logik dafür ist nicht schwer und du hast sie schon -> klare Vorteile. Dafür hast du aber höheren Rechenaufwand, längere Antwortzeiten und verbrauchst mehr Bandbreite.
Wenn dir Rechenaufwand und Bandbreite egal sind und die Antwortzeit akzeptabel ist, stellt sich die Frage, ob sich der Aufwand lohnt. Kosten-Nutzen musst du selbst abwägen.

Fall zwei solltest du mit deinem eignen Auswahl-Code, dem Code von Evilive und meinen Anmerkungen im letzten Post (max-age / ajax einmal im onload ausführen) hinbekommen.

Fall eins, solltest du diesen Weg wählen, ist entsprechend schwieriger:

1. Wie nötige ich es neben jpg auch jpeg, png und gif zu nehmen?
2. Muss ich die Anzahl der Dateien jetzt jedesmal anpassen?

Meine Idee war es für die Seite ein PHP Skript laufen zu lassen, dass dir die notwendigen Daten dann in das Javascript rendert.

[src=javascript]
var images = {
types : <?php echo json_encode($images); ?>,
total : <?php echo array_reduce($images, function($carry, $count) { return $carry + $count; }, 0); ?>,
getRandom : function () {
var keys = Object.keys(this.types);
var random = Math.ceil(this.total * Math.random());
for (var i = 0; i < keys.length; i++) {
if(random > this.types[keys])
random -= this.types[keys];
else return random+"."+keys;
};
}
}
[/src]
PHP erzeugt dann eine Ausgabe, die eingerückt so aussehen würde:
[src=javascript]
types : {
jpg : 10,
jpeg : 15,
png : 4,
gif : 8
},
total : 37,
getRandom ...
[/src]

und der Aufruf images.getRandom() spuckt dann zB 4.gif oder 10.jpg aus

dafür muss die Variable $images natürlich befüllt sein und so aussehen:
[src=php]
$images = array(
"jpg" => 10,
"jpeg" => 15,
"png" => 4,
"gif" => 8
);
[/src]

Das solltest du natürlich automatisch erstellen lassen.
Damit hast du dann die Beschränkung, dass die Dateien 1.gif, 2.gif, 3.gif ... 8.gif vorhanden sein müssen und die Datei lachen.gif nicht auftaucht.
Wenn du die Dateiverwaltung (hochladen / entfernen) in PHP machst, kannst du das sicher einbauen.
Wird zB 5.gif entfernt, löscht das Skript 5.gif, benannt 8.gif in 5.gif um und fordert Varnish auf zaaapfun/index.php, 8.gif und 5.gif aus dem cache zu nehmen.

Solltest du die Dateien bisher jedoch einfach per ftp auf den Server schieben, fällt der dieser Verwaltungsaufwand auf dich, dann gilt es als nächstes die Dateiverwaltung zu automatisieren, lieber die Performance-Einbuße mitnehmen und das ganze mit Ajax machen.

 

[LemonDrops]

Du kannst auch eine JSON Datei erzeugen und bereitstellen die gecacht wird, solange es eben sinn macht und die alle relevanten Bildnamen enthält. Dann brauchst du auch keine Nummerierung uns du kannst alles cachen.

 

[theSplit]

Wenn die Anzahl der Bilder nicht zu umfangreich ist, würde ich das spontan folgend lösen:

1.Liste der Bilder mittels PHP ermitteln die angezeigt werden können und diese für einen Zugriff speichern, entweder direkt in eine Javascript Tag Deklaration schreiben, oder zum Beispiel das "name" Attribute des Divs mit einem Array der Bildnamen befüllen
2. Den Div der das Bild enthält mit einem onclick belegen der eine Funktion ausführt die das Src attribute des Bildes mit eines aus dem Array per Zufall ersetzt

Das ginge dann auch ohne Ajaxrequest, weil du direkt das src Attribut des Bildes umschreiben würdest.

Sieht in Javascript etwas so aus:
[src=javascript]
function ladeZufallsBild(evt) {
// Canceln wir die Standardaktion des evt/events
evt.preventDefault();

// Liste der Bilder in einem Array, erzeugt mit "implode(',', $Dateien)"
var bildArray = ["Bild1.jpg", "Bild2.jpg", "Bild3.jpg"];


// Zufallsposition aus Anzahl der Bilder generieren und einen Integer
// daraus machen mittels Math.round
var zufallsBildPosition = Math.round(Math.random() * (bildArray.length - 1));
var bildZumLaden = bildArray[zufallsBildPosition];

// Ermitteln des Bildtags, als erste Child-Node im Div
var bildElement = document.getElementById("main")[0];

// BildElement src Attribute umschreiben, der Browser
// lädt dann automatisch das Bild
bildElement.src = "../zfimages/"+bildZumLaden;
return;
}

// Klick Handler mittels AddEventListener an den Main Div binden und
// Funktion aufrufen die ein anderes Bild lädt
document.getElementById("main").addEventListener("click", ladeZufallsBild);

// Klick Handler auch auf das Bildelement legen, falls der User nicht auf das Div aber
// das Bild klickt
document.getElementById("main").children[0].addEventListener("click", ladeZufallsBild);
[/src]

Die HTML Struktur sollte dann etwa so wie die von EvilLive aussehen..
Die Höhe des Bildes würde ich dann nochmal mittels Javascript anpassen um zu erzwingen dass das geladene Bild nicht höher als 600px ist und vom Browser forciert auf diese Höhe skalliert bzw. reduziert wird.
Wenn die Bilder nicht höher als die von dir angedachte Höhe sind, kannst du den Höhenwert im Bildtag auch weglassen, dann wird der Browser auch nicht gezwungen die Bilder (unter Verlust) selbst zu skalieren.
Das Array im "Name" Attribute könnte man auch weglassen, wenn die Reihenfolge einmal in einer Javascript Variable definiert wurde.
[src=html4strict]
<div id="main">
<img src="mySource.jpg" height="600px" />
</div>[/src]

Wenn du die Dateien dann nicht jedesmal aus dem Verzeichnis erzeugen lässt sondern aus einer Datenbank ziehst in dem jetzt nur die Bildnamen eingetragen sind, würde das auch etwas Arbeit sparen da du im Grunde nur einen Datenbank Satz auslesen und anzeigen lässt, anstelle bei Seitenaufruf das Verzeichnis durchzuschreiten und Überprüfungen zu machen ob es sich um ein Verzeichnis handelt oder nicht - da diese Information ja nur einmal bei der Erstellung der DB getätigt werden müsste, wenn du dann eine Bildreferenz aus der Datenbank entfernst, garantierst du auch Aktualität der Daten da nur hier die Liste verwaltet wird und kannst dann das Bild löschen.
Lädst du dann ein Bild mittels Dateimanager zum Beispiel hoch, kannst du auch schneller prüfen ob es eine Datei mit diesem Namen gibt, diese Suffixen lassen mit fortschreitender Nummerierung.

Bei der Javascript Lösung kannst du allerdings leider nicht garantieren das eine Datei, die sich noch im Wert der Variable BildArray befindet, auch noch wirklich existiert. Idealer wäre dabei ein Zugriff auf PHP Datei die, mittels Post eine Liste aller Bilder übergibt die schon vorhanden gewesen/angesehen wurden sind, diese mit der Bilddatenbank abgleicht, und dann nur noch ein Bild zurückgibt das nicht mittels Post bereits enthalten gewesen ist und dann das Javascript-Array so aktualisiert wird das wir nur die Bilder kennen, die auch schon geöffnet gewesen sind und nicht alle Bilder die noch möglich wären.
Dies könnte man dann auch anstelle des textlichen Bildnames dann mit POST einer Nummernliste machen, die dann einfach bei mySQL die aktuelle Zeilennummer an das Javascript zurückgibt, und diese ausschließt wenn diese gesendet wurde, wobei dann nur die Auswahl der anderen Zeilen der Tabelle möglich sind.
Bleiben keine alternativen mehr, wird dann einfach ein Steuerzeichen von PHP gesendet, das die Liste in Javascript zurücksetzt und dann der Aufruf in JS nochmals mit keinen bekannten Angaben außer dem letzten Bild wiederholt wird, da wir wieder alle anderen Optionen haben möchten.

Also wird die Liste hier in Javascript aufgebaut die wir schon kennen, anstelle zu sagen das wir alle Bilder kennen, und dann daraus immer weniger wählen möchten.

 

[TheOnly1]

Boa Leute...ihr fahrt aber auf hier.

Ich setz mich gleich mal dran und gucke was ich draus machen kann. Versprechen kann ich aber nix.

 

[Shodan]

@theSplit:
Es gibt eine trivial einfache Möglichkeit nur Bilder anzuzeigen, die der Client noch nicht gesehen hat:
Man pfeift auf die Zufälligkeit und gibt sie sortiert aus. Dabei bleibt der Aufwand sich zu merken welche Bilder schon gesehen wurden konstant (man muss sich nur das letzte gesehene merken) statt linear mit deren Zahl zu steigen

 

[evillive]

nur weil ich es gerade sehe.

[src=html5]<img src="http://www.zaaap.net/zfimages/ZaaaPnet_image696.jpg" id="zufallsbild-id" alt="">[/src]

ich hab schon mal Quellcode gesehen der sah so aus:

[src=c]int a-z = 23;[/src]

und dann wundert man sich, dass es nicht funktioniert html5 erlaubt aber alle möglichen ids da musst du dir jetzt keine Sorgen machen. bei HTML 4.01 musst man aber etwas aufpassen