Ich habe diesen Code gefunden, um den gewünschten Effekt zu erzielen und habe ihn auf JSFiddle
ausprobiertEs scheint zu funktionieren, dass es das Bild nach dem Laden verblasst. Dann habe ich es auf einer Webseite versucht und es funktionierte nicht auf die gleiche Weise, indem ich das Bild zuerst lud, anstatt es einzublenden. Obwohl es manchmal so aussah, als ob es zur selben Zeit eingeblendet wurde, als es geladen wurde.
Gibt es einen zuverlässigeren Weg, dies zu erreichen, vorzugsweise durch Änderung dieses Codes, wenn möglich?
Der einzige zuverlässige Weg zu fadeIn() einem Bild, das sich in Ihrem tatsächlichen HTML-Markup befindet, ist, einen onload -Handler im HTML-Markup wie folgt zu setzen:
Arbeitsdemo hier: Ссылка
Wenn Sie so vorgehen, müssen Sie nicht jedem Bild eine ID oder Klasse geben. Legen Sie einfach den Stil und den Ereignishandler im Markup fest.
Der Grund, warum Sie den Event-Handler in das Markup setzen müssen, ist, dass es zu spät sein kann, wenn Sie warten, bis das JavaScript Ihrer Seite ausgeführt wird. Das Bild ist möglicherweise bereits geladen (insbesondere wenn es sich im Browser-Cache befindet) und Sie haben möglicherweise das onload -Ereignis verpasst. Wenn Sie den Handler in das HTML-Markup einfügen, werden Sie das onload -Ereignis nicht verpassen, da der Handler zugewiesen wird, bevor das Bild geladen wird.
Wenn Sie Event-Handler nicht in das Javascript einfügen möchten, können Sie etwas tun, indem Sie einen Platzhalter für das Bild im aktuellen HTML-Code verwenden und JavaScript verwenden, um die eigentlichen Image-Tags zu erstellen und einzufügen Ziehen Sie die Bild-URL vom Platzhalter:
%Vor%Arbeitsdemo: Ссылка
Mit der ersten Option werden Ihre Bilder ein wenig schneller geladen (weil das Laden der Bilder unmittelbar nach dem Parsen der Seite beginnt), aber die zweite Option gibt Ihnen mehr programmatische Kontrolle über den Prozess.
Vielleicht interessant für Leute, die diese Frage finden und angular.js verwenden:
Ich habe eine kleine Anweisung geschrieben, die den Job recht gut macht.
JS:
%Vor%HTML:
%Vor% Indem src nicht im HTML, sondern im directional code gesetzt wird, wird das von jfriend00 erwähnte Problem gelöst (der Handler ist angehängt, nachdem onload ausgelöst wurde).
.ready () zündet nicht so, wie Sie es meinen, sehen Sie den 'load' jQuery Event-Handler
%Vor%Pure Java Script und CSS Lösung:
Verwenden Sie den Übergangseffekt mit Opactiy.
Hier ist ein CSS-Übergang und Javascript-Lösung basierend auf @ Jfriend00's Antwort und ähnlich dem Ansatz von @Robbendebiene:
onload="this.style.opacity=1"