Bilder in bestimmter Reihenfolge laden

Fey

Fey

Erfahrenes Mitglied
Hallo zusammen,

ich bräuchte ein Script, welches Bilder in bestimmter Reihenfolge lädt.

Und zwar soll das folgendermaßen aussehen:

In dem Fenster ist eine Tabelle mit ganz vielen Zellen. In jeder soll ein Bild geladen werden. Die Tabelle wird dann länger wie das Fenster und es entsteht eine horizontale Scrollleiste (was auch so gewollt ist). Da man jetzt aber jedes Bild mal kurz sehen sollte soll es so umgesetzt werden, dass das Bild in der letzten Tabellenzelle vorne zuerst angezeigt wird, dann das Vorletzte und so weiter...

Könnt Ihr Euch das vorstellen? Wäre Klasse wenn Ihr da eine Lösung für mich hättet.

Liebe Grüße,
Fey
 
hmm, ne idee hätt ich schon, weiß aber nicht, ob das realisierbar ist. sabre hat mal ein preload-script gepostet, in dem man halt die image-dateien angibt. theoretisch kann man also deine bilder in der reihenfolge "hinten > vorne" angeben. allerdings ist das problem, dass das ein preload-script ist, d.h. das es eine "loading images" seite anzeigt. das muß im prinzip nur noch so abgeändert werden, das man das laden der bilder "live" verfolgen kann. vielleicht kann das ja mal ein JS profi machen ;)

weiß aber nicht, ob das geht. hauptsache es haut mich nun keiner ;)

hier das script:

PHP: 
<head>
<script language="JavaScript1.1">

<!-- begin hiding

// You may modify the following:
    var locationAfterPreload = "haupt/index.htm" // URL of the page after preload finishes
    var lengthOfPreloadBar = 200// Length of preload bar (in pixels)
    var heightOfPreloadBar = 5 // Height of preload bar (in pixels)
    // Put the URLs of images that you want to preload below (as many as you want)
    var yourImages = new Array("haupt/images/framesback.jpg","haupt/images/grau.jpg","haupt/images/shoutboxback.jpg","haupt/images/tabellenbackground.jpg","haupt/images/main_01.jpg","haupt/images/main_02.jpg","haupt/images/main_03.jpg","haupt/images/main_04.jpg")

// Do not modify anything beyond this point!
if (document.images) {
    var dots = new Array() 
    dots[0] = new Image(1,1)
    dots[0].src = "silver.jpg" // default preloadbar color (note: You can substitute it with your image, but it has to be 1x1 size)
    dots[1] = new Image(1,1)
    dots[1].src = "gray.jpg" // color of bar as preloading progresses (same note as above)
    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) 
}
// end hiding -->
</script>
</head>

PHP: 
<body>
<script language="JavaScript1.1">
<!-- begin hiding
// It is recommended that you put a link to the target URL just in case if the visitor wants to skip preloading
// for some reason, or his browser doesn't support JavaScript image object.
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()
}
// end hiding -->
</script>
</body>
 
Hi Braindad,

hm, thx für die Antwort, aber irgendwie steig ich da jetzt nicht so ganz durch...*schäm*

Hat nicht vielleicht jemand anderst noch eine Idee, wie ich das machen kann?

Liebe Grüße
Feyiama
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück