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

Html Website effizienter machen

P

Peter Pan

Neues Mitglied
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 :))
 
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
 
designfaden schrieb:
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
Zum Vergrößern anklicken....


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)
 
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.
 
<!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>
 
Du musst dich einloggen oder registrieren, um hier zu antworten.

Neueste Beiträge

Zurück
Oben