Bilder fade show blinkt

Django, Flask, Bottle, WSGI, CGI…
Antworten
hanswerdenfels
User
Beiträge: 5
Registriert: Samstag 11. April 2020, 19:06

Donnerstag 16. April 2020, 21:22

Hallo,


Beim ersten Bilderdurchlauf "blinkt" das Bild nach abgeschlossenem Übergang einmal kurz, aber leider doch störend auf. Bei den anschließenden Durchgängen funktioniert es wie gewollt.
Ich vermute, dass es daran liegt, dass die Bilder vorher nicht geladen werden bin mir aber nicht sicher (auch nicht wie man das fixen könnte), habt ihr Ideen woran es liegen könnte und mögliche Lösungen?
Hie hab ichs mal abgefilmt:
https://www.youtube.com/watch?v=W3iDx7GYkZY

Code: Alles auswählen

.maindiv{
            margin: 10px 10px 10px 0;
            height: 300px;
            position: relative;
            top: 150px;
            left: 50%;
            width: 90%;
            transform: translate(-50%,-50%);
            background-image: url("../static/pictures/Slides/a.png");
            background-size: cover;
            background-position: center;
            box-shadow: 1px 2px 10px 5px grey;
            animation: slider {{slide_Time}}s infinite linear ; 	/*slide_Time ist 5*Bilderanzahl */
            border-radius: 10px;

        }
        @keyframes slider{
           {% for percent, pic in slide_dict.items() %}

                {{percent*100}}% {
                    background-image: url("../static/pictures/Slides/{{pic}}");
                    background-position: center;
                }
           {%endfor%}
        }
Schönen Abend und danke für die Hilfe!

Hannes
Antworten