Java Script: Grafik vorladen







Zurück zur Java Scripts-Hauptseite.

Mit diesem Script können die Grafiken einer nachfolgenden Seite vorgeladen werden. Der Ladevorgang wird mittels eines Balkens angezeigt, welcher mit jeder geladenen Grafik etwas mehr ausgefüllt wird. Nach Abschluß des Ladevorgangs wird automatisch die nachfolgende Seite angezeigt. Alternativ kann über einen Link das Vorladen abgebrochen werden.
Zu Demonstrationszwecken ist hier die automatische Weiterleitung deaktiviert worden.



Folgender Code ist in den Head-Bereich der Seite einzufügen:

<script language="JavaScript1.1">
<!--
var locationAfterPreload = "nichtvorhanden.htm"
var lengthOfPreloadBar = 300
var heightOfPreloadBar = 20
var yourImages = new Array("../bilder/logo1.jpg","../bilder/logo2.jpg","../bilder/logo3.jpg", "../bilder/logo4.jpg","../bilder/logo5.jpg")

if (document.images) {
var dots = new Array()
dots[0] = new Image(1,1)
dots[0].src = "vorladeng.gif"
dots[1] = new Image(1,1)
dots[1].src = "vorladenr.gif"
var preImages = new Array(),coverage = Math.floor(lengthOfPreloadBar/yourImages.length),currCount = 0
var loaded = new Array(),i,covered,timerID
var leftOverWidth = lengthOfPreloadBar%coverage
}
function loadImages() {
for (i = 0; i < yourImages.length; i++) {
preImages[i] = new Image()
preImages[i].src = yourImages[i]
}
for (i = 0; i < preImages.length; i++) {
loaded[i] = false
}
checkLoad()
}
function checkLoad() {
if (currCount == preImages.length) {
location.replace(locationAfterPreload)
return
}
for (i = 0; i <= preImages.length; i++) {
if (loaded[i] == false && preImages[i].complete) {
loaded[i] = true
eval("document.img" + currCount + ".src=dots[1].src")
currCount++
}
}
timerID = setTimeout("checkLoad()",10)
}
// -->
</script>

var locationAfterPreload = "pass.htm"URL der nächsten Seite
var lengthOfPreloadBar = 400 Breite des Anzeigebalkens
var heightOfPreloadBar = 20 Höhe des Anzeigebalkens

var yourImages = new Array( "../bilder/logo1.jpg","../bilder/logo2.jpg","../bilder/logo3.jpg", "../bilder/logo4.jpg","../bilder/logo5.jpg"
Hier werden die Adressen der Grafiken in Anführungszeichen und durch Komma getrennt eingetragen, welche vorgeladen werden sollen.

dots[0].src = "vorladeng.gif" Grundgrafik
dots[1].src = "vorladenr.gif" Vortschrittsgrafik
die beiden Grafiken werden benötigt, mit rechts anklicken und mit speichern unter abspeichern


Folgender Code ist in den Body-Bereich der Seite einzufügen:

<script language="JavaScript1.1">
<!--
if (document.images) {
var preloadBar = ''
for (i = 0; i < yourImages.length-1; i++) {
preloadBar += '<img src="' + dots[0].src + '" width="' + coverage + '" height="' + heightOfPreloadBar + '" name="img' + i + '" align="absmiddle">'
}
preloadBar += '<img src="' + dots[0].src + '" width="' + (leftOverWidth+coverage) + '" height="' + heightOfPreloadBar + '" name="img' + (yourImages.length-1) + '" align="absmiddle">'
document.write(preloadBar)
loadImages()
}
document.write('<p><div align="center"><a href="javascript:window.location=locationAfterPreload">vorladen überspringen</a></div></p>')
// -->
</script>



Kontaktformular - Copyrighthinweis und Impressum
zurück zur vorherigen Seite (nur mit Java Script)