Performance bei vielen Backgroundbildern?

  • Hallo.

    Ich baue gerade eine responsive grid gallery und habe einen (Gold)Rahmen mit einem transparenten Mittelteil (.png) als Bild im html Teil.

    Entwurf hier: http://torschaenke-dudeldorf.d…iniaCaye/test/bilder.html

    Als Hintergrundbild habe ich eine kleine Vorschau die mit Hilfe von transition und transform animiert wird.

    <code>

    .work1 {

    background-clip: content-box;

    background-image: url('thumbslatte37.jpg');

    background-size: cover;

    background-position: left;

    }

    .work1:hover {

    background-position: right;

    transition: background-position 10s;

    }

    .work2 {

    background-clip: content-box;

    background-image: url('thumbslatte372.jpg');

    background-size: cover;

    background-position: left;

    }


    .work2:hover {

    ....

    .work3 {

    ....

    background-image: url('thumbslatte63.jpg');

    ....

    .work3:hover {

    .....

    .work4 {

    .....

    background-image: url('thumbslattewenigerSchattenLow.jpg');

    ....

    .work4:hover {

    ....

    </code>

    Meine Frage ist zur Effizienz bzw. Performance dieser Konfiguration:

    Ich habe in der css Datei für jedes Backgroundbildchen eigenes Script und im html Teil immer den gleichen Rahmen. Kann man da nicht noch optimieren?

  • Ich habe in der css Datei für jedes Backgroundbildchen eigenes Script und im html Teil immer den gleichen Rahmen. Kann man da nicht noch optimieren?

    ??????? Wie soll man das verstehen?

    Was machen die Scripte den?

    Reicht da nicht ein Script ?

    Du hast ja reichlich Scripte eingebunden.Brauch man die den alle ?

    Zum Optimieren ist es auch gut ,alles raus zuschmeissen was nicht verwendet wird.

    Aber zurück zu deine Frage ,was versteht man den unter mein Zitat?

  • Ja weißt du den selber was die Scripte alles machen ?

    Auf den ersten Blick ,ohne jetzt alles zu durch forschen und zu testen würde ich sagen du hast mehr drinne als du brauchst.

    Du brauchst in dein fall

    jquery , bootsramp, scripte für deine lightbox, scroll to top, und vieleict noch eins für die einblend effekte.

    Die andere Scripte kenne ich jetzt so nicht ,müsste da erst rein kucken um zu wissen was die machen.


    Fragen wir mal anders,hast du den probleme mit performenc und lade geschwindigkeit ?

    Ich kann wegen Laden nix sagen ,ich habe 400ter Leitung ,da ist jede Seite sofort auf egal wie gross die ist.

    Bei kleineren anschlüssen kann da aber einiges gespert werden,.da kann jedes MB was zu viel ist schon nerven

  • Die Seite ist ja nur ein Beispiel. Die anderen Scripte brauche ich für anderen Inhalt.

    Es geht mir in diesem Fall um die Hintergrundbilder, da mir missfällt, dass ich nachher
    40x den gleichen Wortlaut im Code habe. wor1, work2....work40 und den gleichen Rahmen im html

    auch 40 mal laden muss.

    <code>

    <div class="mbrgallery-item--p3 work" <div href="" <img src="assets/images/goldenframe-1-559x300.png" </div></div>

    <div class="mbrgallery-item--p3 work2" <div href="" <img src="assets/images/goldenframe-1-559x300.png" </div></div>

    ....

    <div class="mbrgallery-item--p3 work40" <div href="" <img src="assets/images/goldenframe-1-559x300.png" </div></div>

    </code>


    Ich habe keine Probs mit Performance oder Ladegeschwindigkeit, kann mir aber vorstellen, dass dieser Code nicht optimal ist.


    snote

  • da fehlen reichlich geschlossene Klammern.( 9 )


    Aber ich behaupte mal das man da an deinen Code nicht viel machen kann ,weil irgendwie muß man den Bildern ja eine ID oder eindeutige Class zuweisen damit man sie ansprechen kann.

    Mir fällt da jetzt keine optimierung ein

Jetzt mitmachen!

Sie haben noch kein Benutzerkonto auf unserer Seite? Registrieren Sie sich kostenlos und nehmen Sie an unserer Community teil!