Ich habe eine Seite voller Bilder und ich möchte, dass jede Seite beim Laden eingeblendet wird. Ich habe den folgenden Code, der funktioniert, aber scheint fehlerhaft, im Grunde manchmal nicht das ganze Bild verblassen.
Hat jemand Vorschläge, wie man das verbessert?
Danke
%Vor%Manchmal verblassen nicht alle Bilder.
Ja, das ist normalerweise ein ziemlich grundlegendes Problem: Einige Bilder werden geladen, bevor Sie ihnen einen Load-Event-Handler zugewiesen haben. Dies ist besonders wahrscheinlich, wenn die Bilder zwischengespeichert werden.
Wenn die Bilder im HTML-Format vorliegen, ist leider nur ein (extrem hässliches) Inline-Onload-Attribut möglich:
%Vor% Sie können zuerst sicherstellen, dass Ihre Bilder standardmäßig ausgeblendet sind (so dass Ihre jQuery hide -Aufrufe nicht mehr benötigt werden) mit etwas CSS,
Und dann könnten Sie in Ihrem Dokument Folgendes versuchen. Ich gebe zu, dass es hier einige Redundanzen geben wird, in denen einige Bilder (hinter den Kulissen) versuchen, zweimal einzublenden, aber das Endergebnis wird genauso aussehen. Dies ist der Kompromiss, den ich zugeben werde, wenn ich versuche, eine einfache Antwort darauf zu geben.
Die Situation wird in Ihrem Dokument liegen.ready, einige Bilder haben geladen (besonders solche, die bereits zwischengespeichert wurden) und einige können noch ausstehen.
%Vor%Da jQuery Ihre Animationseffekte "stapelt", sobald etwas vollständig eingeblendet ist, können Sie fadeIn erneut aufrufen, und nichts sollte (sichtbar) passieren.
Wenn dies inakzeptabel ist, könnten Sie wahrscheinlich eine komplexere Möglichkeit finden, zu überprüfen, welche Bilder eingeblendet wurden und welche nicht, bevor Sie das Load-Ereignis auf sie setzen.
Viel Glück!
Ich habe das gerade in diesem Thread beantwortet: jQuery Wie erhalten Sie ein Bild, das beim Laden eingeblendet wird?
Funktioniert für mich!
Ich habe mich kürzlich mit diesem Durcheinander befasst. Ich habe diese ähnliche Frage beantwortet, aber es ist nicht genau das, was Sie fragen ...
Holen Sie sich das echte Breite und Höhe eines Bildes mit JavaScript? (in Safari / Chrome)
fügen Sie Ihren Code in diese Funktion ein. Wenn Sie $ (Dokument) verwenden, funktioniert es, sobald das dom geladen ist. Wenn Sie den Körper verwenden, wird er gestartet, sobald der Körper vollständig geladen ist. Auf diese Weise werden Ihre Bilder immer eingeblendet, nachdem der Körper geladen wurde.
%Vor%Um mit gecachten Bildern umzugehen, funktioniert die Lösung von Bobince, aber wie er sagte, ist es ziemlich hässlich.
Eine andere Lösung wäre, Ihre Bilder in CSS zu verstecken und das folgende Javascript zu verwenden:
%Vor%Auf diese Weise werden die meisten Bilder korrekt geladen, und wenn sie zwischengespeichert und sofort ausgeblendet wurden (die Ladefunktion hat keine Zeit zum Abfeuern), werden sie durch das Ladeereignis der Seite angezeigt. Das Ladeereignis der Seite stellt sicher, dass alles geladen wurde.
Du könntest alle Bilder nehmen und sie in ein Bild einfügen und das einblenden, aber dann kommen alle zur selben Zeit herein und es wird eine große Datei sein. Es hängt davon ab, wofür Sie es verwenden möchten.