mirror of
https://github.com/Anvilcraft/jensmemes
synced 2024-11-13 21:41:27 +01:00
Preloading verbessert
This commit is contained in:
parent
21a80d6671
commit
fa2b3e9d0f
6 changed files with 235 additions and 135 deletions
|
@ -2,7 +2,7 @@
|
|||
|
||||
$SQLHost = "db.a-hoefler.eu";
|
||||
$SQLUser = "root";
|
||||
$SQLPasswort = "";
|
||||
$SQLPasswort = "bqCdUHZYgHeTd583kZ3cMVd9";
|
||||
$SQLDatenbank = "jensmemes";
|
||||
$con = mysqli_connect($SQLHost, $SQLUser, $SQLPasswort, $SQLDatenbank);
|
||||
|
||||
|
|
|
@ -1,143 +1,152 @@
|
|||
<div id="all">
|
||||
<?php
|
||||
include ('../dbcon.php');
|
||||
?>
|
||||
<h2>JensMemes</h2>
|
||||
<?php
|
||||
$sqlJens = "SELECT * FROM images";
|
||||
$db_ergJens = mysqli_query( $con, $sqlJens);
|
||||
if ( ! $db_ergJens )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_ergJens, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="jens"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
<div id="jens">
|
||||
<h2>Jens Memes</h2>
|
||||
<?php
|
||||
$sqlJens = "SELECT * FROM images";
|
||||
$db_ergJens = mysqli_query( $con, $sqlJens);
|
||||
if ( ! $db_ergJens )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_ergJens, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="jens"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
|
||||
</div>
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
|
||||
</div>
|
||||
';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
mysqli_free_result( $db_ergJens );
|
||||
?>
|
||||
</div>
|
||||
<div id="random">
|
||||
<h2>$hit Memes</h2>
|
||||
<?php
|
||||
$sqlrandom = "SELECT * FROM images";
|
||||
$db_ergrandom = mysqli_query( $con, $sqlrandom);
|
||||
if ( ! $db_ergrandom )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_ergrandom, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="random"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
|
||||
</div>
|
||||
|
||||
';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
mysqli_free_result( $db_ergrandom );
|
||||
?>
|
||||
</div>
|
||||
<div id="realtox">
|
||||
<h2>Realtox Memes</h2>
|
||||
<?php
|
||||
$sqlrealtox = "SELECT * FROM images";
|
||||
$db_ergrealtox = mysqli_query( $con, $sqlrealtox);
|
||||
if ( ! $db_ergrealtox )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_ergrealtox, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="realtox"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
mysqli_free_result( $db_ergJens );
|
||||
?>
|
||||
<h2>randomMemes</h2>
|
||||
<?php
|
||||
$sqlrandom = "SELECT * FROM images";
|
||||
$db_ergrandom = mysqli_query( $con, $sqlrandom);
|
||||
if ( ! $db_ergrandom )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_ergrandom, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="random"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
|
||||
</div>
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
}
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
|
||||
</div>
|
||||
|
||||
';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
mysqli_free_result( $db_ergrandom );
|
||||
?>
|
||||
<h2>realtoxMemes</h2>
|
||||
<?php
|
||||
$sqlrealtox = "SELECT * FROM images";
|
||||
$db_ergrealtox = mysqli_query( $con, $sqlrealtox);
|
||||
if ( ! $db_ergrealtox )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_ergrealtox, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="realtox"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
}
|
||||
mysqli_free_result( $db_ergrealtox );
|
||||
?>
|
||||
</div>
|
||||
<div id="hendrik">
|
||||
<h2>Hendrik Memes</h2>
|
||||
<?php
|
||||
$sqlhendrik = "SELECT * FROM images";
|
||||
$db_erghendrik = mysqli_query( $con, $sqlhendrik);
|
||||
if ( ! $db_erghendrik )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_erghendrik, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="hendrik"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
|
||||
</div>
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
';
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
mysqli_free_result( $db_ergrealtox );
|
||||
?>
|
||||
<h2>hendrikMemes</h2>
|
||||
<?php
|
||||
$sqlhendrik = "SELECT * FROM images";
|
||||
$db_erghendrik = mysqli_query( $con, $sqlhendrik);
|
||||
if ( ! $db_erghendrik )
|
||||
{
|
||||
die('Ungültige Abfrage: ' . mysqli_error());
|
||||
}
|
||||
while ($zeile = mysqli_fetch_array( $db_erghendrik, MYSQLI_ASSOC))
|
||||
{
|
||||
if($zeile[cat]=="hendrik"){
|
||||
$ext = strtolower(pathinfo($zeile['path'], PATHINFO_EXTENSION));
|
||||
|
||||
if($ext=="mp4"){
|
||||
echo '
|
||||
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'"></a>
|
||||
</div>
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><video src="'.$zeile[path].'" controls class="Videos_"></video> </a>
|
||||
</div>
|
||||
|
||||
';
|
||||
}
|
||||
';
|
||||
} else if($ext=="png" || $ext=="jpg" ||$ext=="jpeg"||$ext=="gif" ){
|
||||
echo '
|
||||
<div class="kasten">
|
||||
<a href="'.$zeile[path].'"><img class="Bilder_" src="'.$zeile[path].'" loading="lazy"></a>
|
||||
</div>
|
||||
|
||||
';
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
mysqli_free_result( $db_erghendrik );
|
||||
?>
|
||||
}
|
||||
mysqli_free_result( $db_erghendrik );
|
||||
?>
|
||||
</div>
|
||||
</div>
|
|
@ -7,10 +7,12 @@
|
|||
<link rel="shortcut icon" type="image/x-icon" href="/img/favicon.ico">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<link id="theme" rel="stylesheet" href="themes/llama.css" />
|
||||
<script defer src="/script/modal.js"></script>
|
||||
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
|
||||
<script defer src="/script/modal.js"></script>
|
||||
<script defer src="/script/button.js"></script>
|
||||
<script defer src="/script/switcher.js"></script>
|
||||
|
||||
<!-- <script src="/script/preload.js"></script> --!>
|
||||
<script src="script/show.js"></script>
|
||||
</head>
|
||||
|
||||
<body class="">
|
||||
|
@ -69,6 +71,19 @@
|
|||
<option value="dark">Dark</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div id="themediv">
|
||||
|
||||
<p>Anzeigen::</p>
|
||||
<select id='show'>
|
||||
<option value="0" selected>All</option>
|
||||
<option value="1">JensMemes</option>
|
||||
<option value="2">Realtox Memes</option>
|
||||
<option value="3">Hendrik Memes</option>
|
||||
<option value="4">Random Memes</option>
|
||||
<option value="5">Hide all Memes</option>
|
||||
</select>
|
||||
</div>
|
||||
<?php
|
||||
$tokencookie = $_COOKIE['token'];
|
||||
if (!empty($tokencookie)) {
|
||||
|
|
|
@ -3,5 +3,4 @@ $files = glob("images/*/*");
|
|||
$random = rand(0, count($files) - 1);
|
||||
$file = $files[$random];
|
||||
echo "https://jensmemes.tilera.xyz/" . $file;
|
||||
?>
|
||||
|
||||
?>
|
29
website/script/preload.js
Normal file
29
website/script/preload.js
Normal file
|
@ -0,0 +1,29 @@
|
|||
document.addEventListener("DOMContentLoaded", function() {
|
||||
var lazyloadImages = document.querySelectorAll("img.lazy");
|
||||
var lazyloadThrottleTimeout;
|
||||
|
||||
function lazyload () {
|
||||
if(lazyloadThrottleTimeout) {
|
||||
clearTimeout(lazyloadThrottleTimeout);
|
||||
}
|
||||
|
||||
lazyloadThrottleTimeout = setTimeout(function() {
|
||||
var scrollTop = window.pageYOffset;
|
||||
lazyloadImages.forEach(function(img) {
|
||||
if(img.offsetTop < (window.innerHeight + scrollTop)) {
|
||||
img.src = img.dataset.src;
|
||||
img.classList.remove('lazy');
|
||||
}
|
||||
});
|
||||
if(lazyloadImages.length == 0) {
|
||||
document.removeEventListener("scroll", lazyload);
|
||||
window.removeEventListener("resize", lazyload);
|
||||
window.removeEventListener("orientationChange", lazyload);
|
||||
}
|
||||
}, 20);
|
||||
}
|
||||
|
||||
document.addEventListener("scroll", lazyload);
|
||||
window.addEventListener("resize", lazyload);
|
||||
window.addEventListener("orientationChange", lazyload);
|
||||
});
|
48
website/script/show.js
Normal file
48
website/script/show.js
Normal file
|
@ -0,0 +1,48 @@
|
|||
$(document).ready(function(){
|
||||
$('#show').on('change', function() {
|
||||
if ( this.value == '0')
|
||||
{
|
||||
$("#jens").show();
|
||||
$("#realtox").show();
|
||||
$("#random").show();
|
||||
$("#hendrik").show();
|
||||
$("#jens").show();
|
||||
|
||||
}
|
||||
else if(this.value == '1')
|
||||
{
|
||||
$("#jens").hide();
|
||||
$("#realtox").hide();
|
||||
$("#random").hide();
|
||||
$("#hendrik").hide();
|
||||
$("#jens").show();
|
||||
}else if(this.value == '2')
|
||||
{
|
||||
$("#jens").hide();
|
||||
$("#realtox").show();
|
||||
$("#random").hide();
|
||||
$("#hendrik").hide();
|
||||
$("#jens").hide();
|
||||
}else if(this.value == '3')
|
||||
{
|
||||
$("#jens").hide();
|
||||
$("#realtox").hide();
|
||||
$("#random").hide();
|
||||
$("#hendrik").show();
|
||||
$("#jens").hide();
|
||||
}else if(this.value == '4')
|
||||
{
|
||||
$("#jens").hide();
|
||||
$("#realtox").hide();
|
||||
$("#random").show();
|
||||
$("#hendrik").hide();
|
||||
$("#jens").hide();
|
||||
}else if(this.value == '5')
|
||||
{
|
||||
$("#jens").hide();
|
||||
$("#realtox").hide();
|
||||
$("#random").hide();
|
||||
$("#hendrik").hide();
|
||||
}
|
||||
});
|
||||
});
|
Loading…
Reference in a new issue