Jquery Bild erscheint für ein kurzes Flackern vor dem Einblenden

Ich weiß, das ist ein häufiges Problem, aber ich habe viele vorgeschlagene Lösungen vergeblich versucht. Alles, was ich erreichen möchte, ist, dass ein Bild beim Laden der Seite eingeblendet wird (ohne kurz für einen Sekundenbruchteil zu erscheinen, bevor es verschwindet und verschwindet).Jquery Bild erscheint für ein kurzes Flackern vor dem Einblenden

Von dem, was ich gelesen habe, ist es empfehlenswert, das Bild zuerst CSS verstecken verwenden, so dass es nicht, bis die FadeIn stattfinden laden soll:

#imgfade { 
    display: none; 
    }

ich diese Arbeit kennen, denn wenn ich entfernen das Jquery, das Bild wird nicht angezeigt. JQuery-Code:

$("#imgfade").fadeIn(600);

ich auch versucht habe:

$("#imgfade").hide().fadeIn(600);

Es funktioniert meistens, aber wenn eine andere Website besuchen, dann zurückkehren, geschieht das Flimmern. Manchmal führt das Hin und Her zu 8/10 mal, manchmal zu flackern.

Ich habe diese CSS auch versucht (mit dem entsprechenden Anpassungs JQuery) ohne Erfolg:

#imgfade { 
opacity: 0; 
}

Ich vermute, dies mit Browser-Caching zu tun sein kann?

Ich benutze Bootstrap 3, aber das benutzerdefinierte CSS (wie oben) erscheint, nachdem die Bootstrap (und andere) CSS-Seiten geladen sind (im Abschnitt innerhalb).

Kann jemand eine völlig narrensichere Methode empfehlen, um dies zu vermeiden? Ich bekomme auch das gleiche Problem mit Text auf einigen der anderen Seiten.

Vielen Dank im Voraus.

Quelle

2017-08-03 BSUK

Sie tun es richtig. Ein vollständiger Neuladen der Seite wird es richtig funktionieren lassen, aber wenn du gehst und dann zurückkommst, wird der Code erneut ausgeführt, sodass er von 0 aus ausgeblendet wird. Eine schnelle Lösung wäre, ihn nur einzublenden, wenn er ausgeblendet ist. –

Es ist möglich, dass der Seiten-HTML-Code geladen wird, bevor die CSS-Datei geladen wird. Verschieben Sie '#imgfade {display: none}' in das '' Ihres Dokuments oder fügen Sie die Stile in das Bild ein. – Blazemonger

Danke, gut zu wissen. Irgendwelche Ideen, wie man es bei der Rückkehr stoppen kann? Ich frage mich, ob es einen "Hack" oder eine alternative Methode gibt, dies zu verhindern. Blazonger: Die Anzeige: Kein Code ist in der des Dokuments (aus diesem Grund), nicht in der separaten CSS-Datei. – BSUK

Ich glaube, ich habe eine Lösung für dieses Problem gefunden, die jedes Mal für 100% funktioniert.
Hoffentlich helfen könnte jemand anderes:

Platzierung des JQuery fadein Code am sehr des HTML-Ende (nach/Körper, vor/html) scheint das Problem aus irgendeinem Grund zu beheben.

Ich verstehe nicht wirklich warum, aber ich kann nur vermuten, dass es irgendwie mit der DOM Ladereihenfolge zusammenhängt. Vielleicht gibt dies der CSS-Chance, richtig gelesen zu werden (um sicherzustellen, dass das div-Element tatsächlich verborgen ist), bevor es versucht, es einzublenden.

Quelle

2017-08-04 18:58:22 BSUK

Jquery Bild erscheint für ein kurzes Flackern vor dem Einblenden

Antwort

Verwandte Themen