Lieber Gast …

… die Inhalte von PSD-Tutorials.de stehen nur registrierten Mitgliedern zur Verfügung. Damit wollen wir den Communitygedanken weiterführen. Als Mitglied trägst du - wenn auch nur im Kleinen - zum Puls der Community bei. Und nur so ist es möglich, weiterhin hochwertige Inhalte für alle bereitzustellen.

Jetzt kostenlos registrieren!

Vorteile der kostenlosen Mitgliedschaft

Mit der kostenlosen und schnell erledigten Registrierung erhältst du viele nachhaltige Vorteile, die wir dir hier in aller Kürze aufzeigen möchten:

  • PSD steht für professionelles Know-how in den Bereichen Bildbearbeitung mit Photoshop, Fotografie, Webentwicklung, Layout- und Vektorbearbeitung, 3D-Bearbeitung mit Cinema 4D und Co.
  • Über 2200 Tutorials mit druckbarer PDF-Datei und teilweise den zugehörigen Arbeitsmaterialien
  • Mehr als 500 Video-Trainings als Stream zur Direktanzeige und zum Download
  • Abruf von über 1000 Downloads zu Photoshop-Presets, 3D-Modellen, Grußkarten, Texturen & Co
  • Zugriff auf ein sehr aktives Forum mit Antworten im Minutentakt
  • Deine Daten sind sicher. Sie werden nicht weitergegeben! Die Mitgliedschaft kann jederzeit und ohne Aufwand wieder gelöscht werden.

Reinschnuppern als Gast

Niemand kauft gerne die Katze im Sack, auch wenn sie kostenlos ist. Wir haben eine Handvoll Tutorials und Video-Trainings ausgesucht, die du auch als Gast ohne Registrierung ansehen kannst. Gefallen sie dir, stehen dir nach der Registrierung alle oben genannten Inhalte zur Verfügung.

Das Punktesystem

Einen winzigen Haken gibt es noch. Es gibt bei uns ein Punktesystem. Damit soll erreicht werden, dass Mitglieder sich aktiv in unserer Community beteiligen. Sobald du im Forum schreibst oder Tutorials kommentierst, bekommst du Punkte. Mit diesen Punkten kannst du wiederum Tutorials anschauen oder Downloads herunterladen. Mit der Registrierung bei PSD-Tutorials.de erhältst du ein Startguthaben von 100 Punkten, womit du schon ein gutes Stück weit kommst.

Jetzt kostenlos registrieren!

DVD-Werbung
Passend zum Inhalt empfehlen wir unsere:

Photoshop-Workshop-DVD - Webdesign

  • Webdesign mit Photoshop: alle erstellten Layouts mit Arbeitsdatei (PSD)!
  • Umsetzung erstellter Weblayouts in HTML/CSS
  • Tipps & Tricks zum Webdesign in Photoshop und zur Webentwicklung
Jetzt informieren Trailer ansehen

Kommentare

  • Alternative Portrait von bo2221

    bo2221

    20.08.2011 - 19:18

    Yeah cooles ding danke schön

  • Portrait von pascal.k

    pascal.k

    28.03.2011 - 23:02

    danke, schön, schnell und einfach =)

  • Alternative Portrait von Frank_B_punkt

    Frank_B_punkt

    11.02.2011 - 20:41

    Sehr schön geschrieben. Vielen Dank

  • Portrait von Chlorgas

    Chlorgas

    14.01.2011 - 18:45

    Feines Tutorial und einfach anzuwenden! Vielen Dank!

    Eine Frage am Rande: Kann es sein, dass dieses Script mit Greybox (von Orangoo Labs) nicht verträgt?

    • Portrait von Chlorgas

      Chlorgas

      14.01.2011 - 18:56

      Hat erledigt, funktioniert super!! :D

  • Alternative Portrait von Zahnerer

    Zahnerer

    03.11.2010 - 09:07

    Gut und einfach erklärt - eben so, wie es sein soll.

    Vielen Dank

  • Alternative Portrait von wuesti

    wuesti

    31.10.2010 - 17:27

    Super! Noch 'ne Frage: Kann ich mit diesem oder einem ähnlichen Trick auch Flash-Dateien vorladen??

    • Portrait von Fidelis_jpg

      Fidelis_jpg

      31.10.2010 - 18:24

      Also im PRINZIP funktioniert das^^
      Wie genau, dafür kenne ich Flash leider zu wenig.
      Vielleicht geht es auf die selbe Methode, wenn man statt Bilder[i] = new Image();
      Bilder[i] = new Object(); schreibt. Musst du mal ausprobieren und dagen, was bei rauskommt^^

  • Alternative Portrait von buerotante

    buerotante

    29.10.2010 - 23:16

    Gefällt mir gut! :-)

  • Alternative Portrait von DGKhan

    DGKhan

    29.10.2010 - 20:00

    Sehr gut..
    Einfach und simpel gestrickt..
    Meine fünf Sterne hast du schon :)

  • Portrait von Designerist

    Designerist

    29.10.2010 - 12:10

    Vielen Dank, das kann ich sehr gut einsetzen!

  • Alternative Portrait von Bic

    Bic

    29.10.2010 - 08:21

    Danke, genau das habe ich gesucht.

  • Alternative Portrait von regina

    regina

    28.10.2010 - 08:25

    Gut erklärt, und ich werde das auf jeden Fall mal ausprobieren!

  • Alternative Portrait von bjoernklein

    bjoernklein

    25.10.2010 - 18:25

    Elegant gelöst!

    Etwas umfangreicher ist vermutlich das parallele Anzeigen eines Lade-Status (nicht lediglich ein rotierendes Lade-Gif, sondern eine Echtzeitanzeige) Ich nehme an, das lässt sich nicht einfach mit JS lösen...

    • Portrait von Fidelis_jpg

      Fidelis_jpg

      31.08.2011 - 03:26

      Es ist möglich den Ladestatus von mehreren Bildern anzuzeigen, alsobei 100 Bilder könnte man eine schöne %-Anzeige machen.
      Mit Sicherheit kann man auch den Status einer einzelnen Grafik anzeigen, aber das ist dann schon komplizierter, da man ständig prüfen und ausgeben müsste, wie viel von einem Bild jetzt schon übertragen wurde.

      • Alternative Portrait von mindraper

        mindraper

        13.01.2012 - 22:26

        AJAX ist das stichwort.

        allerding: eine "richtige" ladeanzeige... selbst wenn du das hinbekommst: overhead wie verrückt. javascript definiert keine methode, mit der die dateigröße ausgelesen werden kann. wie soll man dann prüfen, wieviel % einer ( oder mehrerer ) datei(-en) dann schon geladen wurden? ich kann's mir nicht vorstellen.

        ansonsten: ein + dafür, dass das tut wirklich einfach ist.
        aber: - dafür, dass du insgesamt 3 globale variablen definierst ( var Liste, Bilder & vorladen() ). könnte der grund sein, weshalb andere scripts im ernstfall nicht mehr laufen, die ebenfalls im globalen scope hängen. könnte man versuchen zu vermeiden.

        nix für ungut :)

        gruß



        geändert von mindraper am 13.01.2012 - 22:34
  • Alternative Portrait von psdgustav

    psdgustav

    24.10.2010 - 16:44

    Sehr schön! Ein TUTORIAL, das gut erklärt und funktioniert. Wenn alle so waren.

  • Alternative Portrait von mohnhaupt

    mohnhaupt

    24.10.2010 - 15:33

    Find ich gut, aber mit CSS wäre es mir lieber gewesen.

  • Alternative Portrait von flyjoker

    flyjoker

    24.10.2010 - 13:44

    vielen dank. so etwas ist sehr nützlich.

  • Alternative Portrait von Clubnite

    Clubnite

    23.10.2010 - 20:36

    Schonmal was von css sprites gehört? Und wie versorgst du Leute, die JS deaktiviert haben? Solche gibt es nämlich immernoch.

Weitere Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.

Tutorial empfehlen

 

Anleitung (Bilder + Extras werden nur für Mitglieder eingeblendet)


Oft hat man beim Programmieren das Problem, dass man eine schöne Website mit vielen Bildern usw. aufgebaut hat, vielleicht mit ein paar Mausover- oder hoover-Effekten. Als Beispiel nenne ich jetzt einfach eine Navigationsleiste, bei der die Menüpunkte in Grafiken dargestellt sind. Bei entsprechender Größe und Anzahl dieser Grafiken ist ein Hoover-Effekt, also das Ändern des Bildes bei Überfahren mit dem Mauszeiger, fast undenkbar, da für jeden Menüpunkt wieder ein neues Bild geladen werden müsste, wodurch sich die Navigation nicht optimal und schnell bedienen ließe.

Hier wenden wir jetzt also einen kleinen Trick mit Javascript an, um diese Bilder bereits VOR dem eigentlichen Aufruf in den Cache des Browsers zu laden, damit dieser dann später sofort darauf zugreifen kann. Aber keine Angst, der Code ist im Grunde ganz simpel und kann problemlos in eine HTML-Datei eingebunden werden.

Zunächst erschaffen wir die Javascript-Umgebung, um das Script in die HTML-Datei einzufügen. Der gesamte folgende Code muss übrigens innerhalb des <head>-Tags stehen, für die, die es noch nicht wissen:

<html>
<head>

<script type="text/javascript" language="JavaScript">

//Code

</scpipt>

</head>
<body>
</body>
</html>

Nun zum Programm selbst:

Als Erstes müssen wir die Bilder auflisten, die wir letztendlich vorladen wollen. Dafür verwenden wir einen Array in Javascript:

var Liste = new Array();

Jetzt haben wir den Array erzeugt, nun wird es Zeit, ihn zu füllen (dieser Array hat hier jetzt nur eine Listen-Funktion und sonst keine!):

Liste[0] = "http://meine-domain.de/bild1.jpg"; 
Liste[1] = "http://meine-domain.de/bild2.jpg";
Liste[2] = "http://meine-domain.de/bild3.jpg";

Mit Liste[x] geben wir die Nummer des jeweiligen Arrayteils an und mit der URL das Bild, das vorgeladen werden soll. Nun kann man beliebig viele Arraywerte eintragen; hier mache ich es jetzt der Kürze halber bis 4 (am Ende sind es dann 5 vorzuladene Bilder, da wir ja bei 0 anfangen). Bisher haben wir also:

<html>
<head>
<script type="text/javascript" language="JavaScript"> 

var Liste = new Array(); 

Liste[0] = "http://meine-domain.de/bild1.jpg";
Liste[1] = "http://meine-domain.de/bild2.jpg";
Liste[2] = "http://meine-domain.de/bild3.jpg"; 
Liste[3] = "http://meine-domain.de/anderes_bild1.jpg";
Liste[4] = "http://meine-domain.de/anderes_bild2.jpg"; 

</scpipt>
</head>
<body>
</body>
</html>

 
Nun laden wir mit
var Bilder = new Array();

die Bilder in einen Array, um sie dann mit dieser Funktion letztendlich vorzuladen:

function vorladen()
{
 for (i = 0; i < Liste.length; i++) {
 Bilder[i] = new Image();
 Bilder[i].src = Liste[i];
 }
}

Mit der For-Schleife durchlaufen wir jetzt für jedes einzelne Bild den Lade-Vorgang. Die Anzahl der Schleifendurchläufe wird durch Liste.length bestimmt. Mit Bilder[i] = new Image(); erzeugen wir zunächst die gleich benötigte Variable. Und mit Bilder[i].src = Liste[i]; weisen wir der Bildvariable die URL aus der Liste zu.

Damit alles funktioniert, müssen wir diese Funktion jetzt auch noch aufrufen, und zwar mit:

vorladen();

Im Gesamten haben wir jetzt folgenden Code:

<html>
<head>
<script type="text/javascript" language="JavaScript">

var Liste = new Array();

Liste[0] = "http://meine-domain.de/bild1.jpg";
Liste[1] = "http://meine-domain.de/bild2.jpg";
Liste[2] = "http://meine-domain.de/bild3.jpg";
Liste[3] = "http://meine-domain.de/anderes_bild1.jpg";
Liste[4] = "http://meine-domain.de/anderes_bild2.jpg";

var Bilder = new Array();

function vorladen()
{
 for (i = 0; i < Liste.length; i++) {
 Bilder[i] = new Image();
 Bilder[i].src = Liste[i];
 }
}

vorladen();

</scpipt>
</head>
<body>
</body>
</html>

Jetzt werden alle Bilder, die im Array Liste mit einer URL definiert worden sind, gleich zu Beginn des Ladens der Seite vorgeladen.

Ihr könnt den Array Liste natürlich bis zum Platzen füllen und müsst danach nichts mehr am restlichen Code ändern. Darauf zielt ja das Ganze ab, dass es leicht editierbar und einbindbar ist.

Ich hoffe, ihr könnt etwas damit anfangen ;)

Viele Grüße von Fidelis_jpg!
vBulletin 0.04 • ZF-App 0.486 • Total 0.525