Beiträge von snote

  • Performance bei vielen Backgroundbildern?

    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

  • 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?