Háttérkép berakása esetén automatikus görgetés lassul

Háttérkép berakása esetén automatikus görgetés lassul
2019-05-13T18:09:11+02:00
2019-05-16T09:11:12+02:00
2022-10-15T21:36:40+02:00
Vörös László
Sziasztok!

Készítettem egy információs TV-t, aminek a szoftvere RPI-n megy teljes képernyős Chromium böngészőben, kioszk módban. :)

Ha beteszek háttérképet, az automatikus görgetés az elején lassú, begyorsul, majd a végére megint lassú. Windowson tökéletes.

A html kód:

<!DOCTYPE html> <html> <head> <title>PSEG InfoTV</title> <meta charset="utf-8"> <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous"> <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script> <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.0/animate.min.css"> <style type="text/css">.main {margin-top: 100px;} </style> <link rel="stylesheet" type="text/css" href="hatter.css"> </head> <script type="text/javascript"> function informaciokeres(){ var xmlhttp = new XMLHttpRequest(); xmlhttp.onreadystatechange = function() { if (this.readyState == 4 && this.status == 200) { document.getElementById('informaciok').innerHTML=""; var informaciok = JSON.parse(this.responseText); document.getElementById("ebed").innerHTML = informaciok["etel"]; for (var informacio in informaciok.informaciok) { document.getElementById('informaciok').innerHTML+='<h2 class="text-dark bg-light text-justify" style="font-size: 120px; opacity: 0.8;">' + informaciok.informaciok[informacio] + '</h2>'; } ellenorzes(); } }; xmlhttp.open("GET", "informaciokozles.php", true); xmlhttp.send(); } function ellenorzes(){ if(document.documentElement.scrollHeight<=document.documentElement.clientHeight) { setTimeout(function() {informaciokeres();}, 30000); } else{ setTimeout(function() {pageScroll();}, 3000); } } function pageScroll() { window.scrollBy(0,4); if($(window).scrollTop() + $(window).height() == $(document).height()) { setTimeout(function() { informaciokeres(); window.scrollTo(0,0);}, 5000); } else{ scrolldelay = setTimeout(pageScroll,200); } } function startTime() { var today = new Date(); var h = today.getHours(); var m = today.getMinutes(); var s = today.getSeconds(); m = checkTime(m); s = checkTime(s); document.getElementById('pontosido').innerHTML = h + ":" + m + ":" + s; var t = setTimeout(startTime, 500); } function checkTime(i) { if (i < 10) {i = "0" + i}; // add zero in front of numbers < 10 return i; } function onstart(){ informaciokeres(); startTime(); } </script> <body onLoad="onstart()" style="overflow: hidden !important;" > <nav class="navbar fixed-top navbar-light bg-light" style="max-height: 100px; "> <h2 class="navbar-brand text-center text-dark" style="text-align: center; float: none; font-size: 30px !important;">Információk</h2> <h2 class="nav-item text-center text-dark" style="font-size: 30px !important;" id="pontosido"></h2> <h2 class="nav-item text-right text-dark" id="ebed" style="font-size: 30px !important;"></h2> </nav> <div class="container-fluid main" id="informaciok" style=""> </div> </body> </html>
hatter.css:

body, html { background-image: url("hatter.jpg"); background-attachment: fixed; background-position: center; background-repeat: no-repeat; background-size: contain; }
Hogyan tudnám a problémát megoldani?
Mutasd a teljes hozzászólást!

Tetszett amit olvastál? Szeretnél a jövőben is értesülni a hasonló érdekességekről?
abcd