Html Website effizienter machen

  • Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!

Peter Pan

Neues Mitglied
31 März 2020
16
0
1
22
Ich hab eine Website über bplaced erstellt und dadurch, dass ich 10 000 Zeilen habe und mehrere hundert Fotos laden (interaktives Buch) muss lagt die Seite leider sehr.
Gibt es eine Möglichkeit das Ganze effizenter zu gestalten?

Lg und danke im Voraus :))
 

designfaden

Neues Mitglied
4 April 2020
2
1
1
31
Guten Morgen,

sind die Bilder gut komprimiert? jpg-Format und Auflösung dem Bildschirm entsprechend?
Wie groß sind die Bilder?

Was den Code angeht, müsstest du schauen, ob du da evtl. aufräumen / vereinfachen kannst. Ohne den Code zu sehen, kann ich das nicht beurteilen.

Grüße
 
  • Like
Reaktionen: Peter Pan

Peter Pan

Neues Mitglied
31 März 2020
16
0
1
22
Guten Morgen,

sind die Bilder gut komprimiert? jpg-Format und Auflösung dem Bildschirm entsprechend?
Wie groß sind die Bilder?

Was den Code angeht, müsstest du schauen, ob du da evtl. aufräumen / vereinfachen kannst. Ohne den Code zu sehen, kann ich das nicht beurteilen.

Grüße


Die Bilder sind alle jpg. Files und den Code habe ich auch versucht zu minimieren. Auf 1 Zeile soll ich es aber nicht verringern oder? Bplaced muss die Bilder halt von ihrem Server laden und da das nicht wenige sind lagt das wahrscheinllich sehr. (sind aber alle mit Prozentangabe an das Bilderbuch angepasst)
 

Sailor

Aktives Mitglied
14 Juli 2017
519
67
28
Sorry... aber mit deinen Beschreibungen kann man nichts anfangen - und schon gar nicht dein Problem analysieren!
Wir brauchen den Code - gib uns einfach den Link zu deiner Seite, dann kann dir auch geholfen werden.
 
  • Like
Reaktionen: Peter Pan

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
1. bplaced ist ganz gut, um sich mit einem Server und dem Hochladen ein wenig vertraut zu machen, hat aber seine Grenzen, was die Performance betrifft. Für einen produktiven Einsatz dürftest Du mit einem kostenpflichtigen Webspace besser bedient sein. all-inkl bietet einen kostenlosen Testaccount an, so dass Du versuchen könntest, ob die Performance besser ist, ohne dich zu binden. alfahosting glaube ich auch.
2. Offenbar bist Du nicht allein mit deinem Problem:
Dort wird geschrieben, das turn.js einen cache besitzt. Versuche, das zu finden und zu aktivieren.
 
  • Like
Reaktionen: Peter Pan

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Tronjer schrieb:
Nennt sich lazy loading. Ist aber kein Einsteigerthema.
An sich korrekt, aber das Verfahren unter dem Link prüft, ebenso wie die meisten anderen solcher Skripts, ob das Bild im Viewport ist. Das ist jedoch im Fall des TO nicht anwendbar, weil es sich um ein Flipbook bzw. interaktives Buch handelt, wo nicht gescrollt wird.
Ich habe inzwischen ein wenig in der Doku von turn.js nachgeforscht und es scheint so, dass Lazyloading nicht implementiert ist, sondern vom Anwender zu Fuß realisiert werden muss. Möglicher Weise ist es das, was in dem Issue bei Github mit "cache" gemeint ist.
 
  • Like
Reaktionen: Peter Pan

Peter Pan

Neues Mitglied
31 März 2020
16
0
1
22
<!DOCTYPE html>
<html lang="en">
<head>
<title> Flipbook </title>
<meta name="viewport" content="width = 1050, user-scalable = no" />
<script type="text/javascript" src="jquery.min.1.7.js"></script>
<script type="text/javascript" src="modernizr.2.5.3.min.js"></script>
<link rel="stylesheet" href="style2.css">
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="http://www.turnjs.com/lib/turn.min.js"></script>
<style>
body {
overflow: hidden;
}
#flipbook .page {
background: white;
}
#flipbook .shadow,
#flipbook.shadow {
-webkit-box-shadow: 0 4px 10px #666;
-moz-box-shadow: 0 4px 10px #666;
-ms-box-shadow: 0 4px 10px #666;
-o-box-shadow: 0 4px 10px #666;
box-shadow: 0 4px 10px #666;
}
#flipbook .page-wrapper,
#flipbook .page-wrapper {
-webkit-perspective: 2000px;
-moz-perspective: 2000px;
-ms-perspective: 2000px;
perspective: 2000px;
}
#flipbook .page:not(.hard).odd {
background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
box-shadow: inset 0 0 5px #666;
border-left: 1px solid #ccc;
}
#flipbook .page:not(.hard).even {
background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
box-shadow: inset 0 0 5px #666;
}

</style>
</head>
<body>
<div class="flipbook-viewport">
<div class="container">
<div class="flipbook">
<div class="hard">
<img src="lol.png" alt="" width=100%/>
</div>
<div class="hard">
<img src="lol.png" alt="" width=100%/>
</div>

<div class="flex">
<img class="img-1" src="4.jpg" alt="" width=80% />
</div>
<div class="flex">
<img class="img-1" src="twitter/dolphine.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X2.jpg" alt="" width=90% />
</div>
<div class="flex">
<img src="twitter/X3.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X4.jpg" alt="" width=80% />
</div>
<div class="flex">
<img src="twitter/X5.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X6.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X7.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X8.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X9.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X10.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X11.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X12.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X13.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X14.jpg" alt="" width=78% />
</div>
<div class="flex">
<img src="twitter/X15.jpg" alt="" width=78% />
</div>
............................ dazwischen sind noch gaaanz viele Bilder :)
<div class="flex">
<img src="twitter/1 (1467).jpg" alt="" width=78% />
</div>
<div class="flex">
<h1> ,') </h1></div>
<div class="hard">
<img src="lol.png" alt="" width=100%/>
</div>
<div class="hard">
<img src="lol.png" alt="" width=100%/>
</div>
</div>
</div>
</div>
</div>
<div id="slider"></div>
<script type="text/javascript">

function loadApp() {
const audioObj = new Audio();
audioObj.src = 'flip.mp3';
// Create the flipbook
$('.flipbook').turn({
// Width
width: 1000,
// Height
height: 600,
// Elevation
elevation: 50,
// Enable gradients
gradients: true,
// Auto center this flipbook
autoCenter: true
});
$(".flipbook").on('turning', function (event, pageObject) {
console.log('start');
audioObj.play();
});
}





// Load the HTML4 version if there's not CSS transform

yepnope({
test: Modernizr.csstransforms,
yep: ['turn.js'],
nope: ['/turn.html4.min.js'],
both: ['basic.css'],
complete: loadApp
});

const min = 1, max = $('.flipbook>div').length;
$("#slider").slider({
min: min,
max: max,
slide: function (event, ui) {
console.log(ui.value);
$(".flipbook").turn("page", ui.value);
}
});
</script>
<script type="text/javascript">
$('#flipbook').turn({
width: 1500,
height: 600,
page: 1,
autoCenter: true,
duration: 2000

})
</script>
<script type="text/Javascript">
$("#flipbook").turn("center");
</script>
<script type="text/Javascript">
$('flipbook').on('turning', function(e, page) {

<source src="flip" type="audio/mp3"/>

});
</script>
</body>
</html>
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Ich habe das Lazyloading inzwischen gefunden. In dem Downloadpaket findet man es unter "magazine". Ich werde versuchen, es in dein Flipbook einzubauen.

Code:
$('flipbook').on('turning', function(e, page) {
<source src="flip" type="audio/mp3"/>
});
Ich fürchte aber, das mit dem Klang wird so nicht funktionieren.
 

Sempervivum

Senior HTML'ler
18 Oktober 2016
2.475
474
83
68
Fertig. Wie es funktioniert habe ich im HTML kommentiert. Du musst die Pfade wieder an deine Umgebung anpassen.
Code:
<!DOCTYPE html>
<html lang="en">

<head>
    <title> Flipbook </title>
    <meta name="viewport" content="width = 1050, user-scalable = no" />
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">

    <script type="text/javascript" src="../../extras/jquery.min.1.7.js"></script>
    <script type="text/javascript" src="../../extras/modernizr.2.5.3.min.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <style>
        body {
            overflow: hidden;
        }

        #flipbook .page {
            background: white;
        }

        #flipbook .shadow,
        #flipbook.shadow {
            -webkit-box-shadow: 0 4px 10px #666;
            -moz-box-shadow: 0 4px 10px #666;
            -ms-box-shadow: 0 4px 10px #666;
            -o-box-shadow: 0 4px 10px #666;
            box-shadow: 0 4px 10px #666;
        }

        #flipbook .page-wrapper,
        #flipbook .page-wrapper {
            -webkit-perspective: 2000px;
            -moz-perspective: 2000px;
            -ms-perspective: 2000px;
            perspective: 2000px;
        }

        #flipbook .page:not(.hard).odd {
            background-image: linear-gradient(to right, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
            box-shadow: inset 0 0 5px #666;
            border-left: 1px solid #ccc;
        }

        #flipbook .page:not(.hard).even {
            background-image: linear-gradient(to left, rgba(255, 255, 255, 0) 90%, rgba(250, 250, 250, 0.5) 94%, #999 100%);
            box-shadow: inset 0 0 5px #666;
        }
    </style>
</head>

<body>
    <div class="flipbook-viewport">
        <div class="container">
            <div class="flipbook">
                <!-- Wir setzen zunaechst ein GIF-Bild mit einer Ladeanimation als Quelle
                und tragen das richtige Bild unter dem data-Attribut "data-src" ein.
                Sobald das Javascript den Beginn des Blätterns erkennt, trägt es das richtige Bild
                aus dem data-Attribut in das src-Attribut ein und das Bild wird geladen.
                Das Bild auf der ersten Seite tragen wir jedoch gleich im HTML in das src-Attribut ein,
                damit es sofort angezeigt wird. -->
                <div class="hard">
                    <img src="../custom/pages/1.jpg" alt="" width=100% />
                </div>
                <div class="hard">
                    <img src="../magazine/pics/loader.gif" data-src="../custom/pages/2.jpg" alt="" width=100% />
                </div>

                <div class="flex">
                    <img src="../magazine/pics/loader.gif" data-src="../custom/pages/3.jpg" alt="" width=100% />
                </div>
                <div class="flex">
                    <img src="../magazine/pics/loader.gif" data-src="../custom/pages/4.jpg" alt="" width=100% />
                </div>
                <div class="flex">
                    <img src="../magazine/pics/loader.gif" data-src="../custom/pages/5.jpg" alt="" width=100% />
                </div>
                <div class="flex">
                    <img src="../magazine/pics/loader.gif" data-src="../custom/pages/6.jpg" alt="" width=100% />
                </div>
                <div class="hard">
                    <img src="../magazine/pics/loader.gif" data-src="../custom/pages/7.jpg" alt="" width=100% />
                </div>
                <div class="hard">
                    <img src="../magazine/pics/loader.gif" data-src="../custom/pages/8.jpg" alt="" width=100% />
                </div>
            </div>
        </div>
        <div id="slider"></div>
    </div>
    <script type="text/javascript">
        const pageeles = $('.flipbook>div>img');
        function loadApp() {
            const audioObj = new Audio();
            audioObj.src = 'Gong-1-2.mp3';
            // Create the flipbook
            $('.flipbook').turn({
                // Width
                width: 1000,
                // Height
                height: 600,
                // Elevation
                elevation: 50,
                // Enable gradients
                gradients: true,
                // Auto center this flipbook
                autoCenter: true
            });

            $(".flipbook").on('start', function (event, pageObject) {
                console.log('start');
                const leftpage = pageeles.eq(pageObject.page);
                const rightpage = pageeles.eq(pageObject.next);
                if (!leftpage.hasClass('loaded')) {
                    leftpage.addClass('loaded');
                    console.log('left not loaded');
                    leftpage.attr('src', leftpage.data('src'));
                }
                if (!rightpage.hasClass('loaded')) {
                    rightpage.addClass('loaded');
                    console.log('right not loaded');
                    rightpage.attr('src', rightpage.data('src'));
                }
            });

            $(".flipbook").on('turning', function (event, pageObject) {
                console.log('turning');
                audioObj.play();
            });
        }

        // Load the HTML4 version if there's not CSS transform
        yepnope({
            test: Modernizr.csstransforms,
            yep: ['../../lib/turn.js'],
            nope: ['../../lib/turn.html4.min.js'],
            complete: loadApp
        });

        const min = 1, max = $('.flipbook>div').length;
        $("#slider").slider({
            min: min,
            max: max,
            step: 2,
            slide: function (event, ui) {
                console.log(ui.value);
                $(".flipbook").turn("page", ui.value);
            }
        });
    </script>
</body>

</html>

Der Slider war noch verbesserungsfähig, weil er nur bei jedem zweiten Rastpunkt blätterte. Das konnte ich leicht beheben, indem ich bei der Initialisierung step auf 2 setzte.
 
Zuletzt bearbeitet:
  • Like
Reaktionen: Peter Pan