jQuery Bildschieber lädt alle Bilder auf einmal

Question

Ich habe ein jQuery Bild Schieberegler auf der Kopfzeile meiner Website, die Bilder in regelmäßigen Abständen in einer automatisierten Schiebebewegung zeigt. Nun ist das Problem, wenn Sie die Seite zum 1. Mal laden (nichts ist zwischengespeichert), es lädt alle Bilder in den Schieberegler auf einmal und es richtet die Bilder ein auf dem anderen auf der Webseite (ein div über einem anderen), so dass Sie alle Bilder auf einmal sehen, sobald die Seite lädt. Das sieht nicht sehr professionell aus. Gibt es vielleicht eine onpageload()-Funktion, die verhindern kann, dass alle Bilder auf einmal angezeigt werden, oder die sie zuerst im Hintergrund laden kann, bevor sie angezeigt werden? Dies ist vor allem ein Problem bei niedrigeren Internetgeschwindigkeiten...Meine Website: http://v4m.mobi

Ich danke Ihnen!

Answer 1

Geben Sie Ihren Bildern einen Stil von display:none oder visibility:hidden und ändern dann ihren Stil wieder in display:[block/inline/etc] oder visibility:visible auf $(window).load() .

$(window).load(function(){
    $('#myImage1').css('visibility','visible');
    $('#myImage2').css('visibility','visible');
    //etc
});

Answer 2

Laden Sie Ihre Bilder vor oder verwenden Sie jQuery und laden Sie Ihren Code mit window.load().

$(window).load(function(){  
// runs after images are loaded  
});

Answer 3

Könnten Sie nicht einfach tun:

.slideshow img {
    display: none;
}

.slideshow img:first-child {
    display: block;
}

Je nach Browser werden sie vielleicht nicht alle auf einmal geladen, aber zumindest wird nur eine sichtbar sein. Außerdem haben Sie die Möglichkeit, das erste Bild als Fallback ohne JavaScript zu verwenden.

Wenn Sie die Unterstützung älterer Browser benötigen, erstellen Sie eine Art "visible"-Klasse und fügen Sie sie dem ersten Bildelement hinzu.