Buna ziua ! Am si eu o problema cu un cod html&js care preia elemente generate de un php. Se misca oribil. ceva sugestii pentru optimizare ?
Rutero
<link rel="stylesheet" type="text/css" href="style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
<meta name="apple-touch-fullscreen" content="YES">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta http-equiv="cache-control" content="max-age=0">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="expires" content="Tue, 01 Jan 1980 1:00:00 GMT">
<meta http-equiv="pragma" content="no-cache">
<link rel="apple-touch-icon" href="icon.png">
<link rel="stylesheet" href="framework7.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script>
$(document).ready(function(){
$(document).on('swiperight', function()
{
myApp.openPanel('left');
});
$(document).on('swipeleft', function()
{
myApp.closePanel('left');
});
$('#menuContentJs').load('http://rutero.simpapp.ro/app/index.php?page=categorii').show();
//console.log(myApp);
});
$(window).load(function(){
$('#loading').fadeOut("slow");
});
</script>
</head>
<body data-role="page">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Rutero</title>
<div id="loading" style="position: fixed; top: 0px; left: 0px; width: 100%; height: 100%; padding-top: 50%; opacity: 1; z-index: 99999 !important; display: none; background-color: rgba(200, 200, 200, 0.8);">
<center>
Se incarca...<br>
<img src="ajax-loader.gif">
</center>
</div>
<div class="statusbar-overlay"></div>
<div class="panel-overlay"></div>
<!-- LEFT PANEL -->
<div class="panel panel-left panel-cover" id="panel" style="top:44px;width:80%;">
<div class="list-block">
<ul>
<li data-layout="menuitem">
<a data-layout-editable="link" href="harta.html" class="close-panel item-link ui-link">
<div class="item-content">
<div class="item-media"><img data-layout-editable="image" src="service.png" class="icon icon-f7"></div>
<div class="item-inner">
<div data-layout-editable="text" class="item-title">Service-uri auto</div>
</div>
</div>
</a>
</li>
<li data-layout="menuitem">
<a data-layout-editable="link" href="tab1.html" class="close-panel item-link ui-link">
<div class="item-content">
<div class="item-media"><img data-layout-editable="image" src="restaurante.png" class="icon icon-f7"></div>
<div class="item-inner">
<div data-layout-editable="text" class="item-title">Restaurante</div>
</div>
</div>
</a>
</li>
<li data-layout="menuitem">
<a data-layout-editable="link" href="tab1.html" class="close-panel item-link ui-link">
<div class="item-content">
<div class="item-media"><img data-layout-editable="image" src="hoteluri.png" class="icon icon-f7"></div>
<div class="item-inner">
<div data-layout-editable="text" class="item-title">Hoteluri</div>
</div>
</div>
</a>
</li>
<li data-layout="menuitem">
<a data-layout-editable="link" href="tab1.html" class="close-panel item-link ui-link">
<div class="item-content">
<div class="item-media"><img data-layout-editable="image" src="transporturi.png" class="icon icon-f7"></div>
<div class="item-inner">
<div data-layout-editable="text" class="item-title">Transport</div>
</div>
</div>
</a>
</li>
</ul>
<a href="distante.html" class="ui-link"><button class="myBtn ui-btn ui-shadow ui-corner-all">Despre</button></a>
<button class="myBtn ui-btn ui-shadow ui-corner-all">Contact</button>
</div>
</div>
<div class="views">
<div class="view view-main" data-page="index">
<!-- HEADER -->
<div class="navbar" style="width:100%;">
<div class="navbar-inner" style="padding:0px;">
<a style="color: #000;width: 100%;" href="locatii.html" data-inline="true" data-transition="slide" data-role="" role="button" class="ui-link"><div class="center sliding" style="width: 100%; text-align: center; background-color: rgb(255, 236, 0);">afiseaza toate locatiile</div></a>
<div class="right" style="background-color: #3A3B3D;width:20%;"><span class="open-panel link icon-only" style="width: 100%;"><img src="menu.png" style="height: 30px; width:30px; margin: 5px auto !important;"></span></div>
</div>
</div>
<center><img id="logo" src="rutero_icon.png"></center>
<div id="map_header"><span>Unde ma aflu?</span><img src="marker.png"></div>
<div id="map"></div>
</div>
</div>
<script>
// Note: This example requires that you consent to location sharing when
// prompted by your browser. If you see the error "The Geolocation service
// failed.", it means you probably did not give permission for the browser to
// locate you.
function initMap() {
var map = new google.maps.Map(document.getElementById('map'), {
center: {lat: -34.397, lng: 150.644},
zoom: 6
});
var infoWindow = new google.maps.InfoWindow({map: map});
// Try HTML5 geolocation.
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude
};
$.post('http://rutero.simpapp.ro/app/index.php?page=update_coords', {'lat' : pos.lat, 'long' : pos.lng}, function(data){
console.log(data);
});
infoWindow.setPosition(pos);
infoWindow.setContent('Location found.');
map.setCenter(pos);
}, function() {
handleLocationError(true, infoWindow, map.getCenter());
});
} else {
// Browser doesn't support Geolocation
handleLocationError(false, infoWindow, map.getCenter());
}
}
function handleLocationError(browserHasGeolocation, infoWindow, pos) {
infoWindow.setPosition(pos);
infoWindow.setContent(browserHasGeolocation ?
'Error: The Geolocation service failed.' :
'Error: Your browser doesn\'t support geolocation.');
}
</script>
<script src="https://maps.googleapis.com/maps/api/js?signed_in=true&callback=initMap" async="" defer="">
</script>
<script type="text/javascript" src="framework7.js"></script><script src="https://maps.googleapis.com/maps-api-v3/api/js/22/8/intl/ro_ALL/main.js"></script><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s8!2sro-RO!3sUS!4s22/8/intl/ro_ALL#WyI0NG9maDUxaXNmIiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe><script src="https://maps.googleapis.com/maps-api-v3/api/js/22/8/intl/ro_ALL/main.js"></script><span style="position: absolute; left: -999px; top: -999px; visibility: hidden; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;">BESbewy</span><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s8!2sro-RO!3sUS!4s22/8/intl/ro_ALL#WyI5OWF3NzF3d2w1IiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe><div style="position: absolute; left: -1280px; top: -1024px; width: 1280px; height: 1024px; visibility: hidden;"><div style="position: absolute; left: 0px; top: 0px;"><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"></div></div></div><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s8!2sro-RO!3sUS!4s22/8/intl/ro_ALL#WyIzd3QzcG56YmtlIiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe><script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s7!2sro-RO!3sUS!4s22/7/intl/ro_ALL#WyIyNWx2MjRxeWt1IiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe><script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s7!2sro-RO!3sUS!4s22/7/intl/ro_ALL#WyI2NWZhbjVwaGg5IiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe><script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s7!2sro-RO!3sUS!4s22/7/intl/ro_ALL#WyI4ZjgzYjMwemJtIiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe><script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><span style="position: absolute; left: -999px; top: -999px; visibility: hidden; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;">BESbewy</span><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s7!2sro-RO!3sUS!4s22/7/intl/ro_ALL#WyIyNG9xNHU4amFqIiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe>
<div class="ui-loader ui-corner-all ui-body-a ui-loader-default"><span class="ui-icon-loading"></span><h1>loading</h1></div><div style="position: absolute; left: -1600px; top: -900px; width: 1600px; height: 900px; visibility: hidden;"><div style="position: absolute; left: 0px; top: 0px;"><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"></div></div></div>
<script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s7!2sro-RO!3sUS!4s22/7/intl/ro_ALL#WyIydzBocnk1MWpnIiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe>
<script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s7!2sro-RO!3sUS!4s22/7/intl/ro_ALL#WyIxODNwZWU4MWVoIiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe>
<script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script><span style="position: absolute; left: -999px; top: -999px; visibility: hidden; font-size: 300px; width: auto; height: auto; margin: 0px; padding: 0px; font-family: Roboto, Arial, sans-serif;">BESbewy</span><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s7!2sro-RO!3sUS!4s22/7/intl/ro_ALL#WyI0anU0MW1hdXJoIiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe>
<script src="https://maps.googleapis.com/maps-api-v3/api/js/22/7/intl/ro_ALL/main.js"></script>
<iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s8!2sro-RO!3sUS!4s22/8/intl/ro_ALL#WyJ6MWxwdHhmYjMiLCIiXQ.." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe><div style="position: absolute; left: -1600px; top: -900px; width: 1600px; height: 900px; visibility: hidden;"><div style="position: absolute; left: 0px; top: 0px;"><div style="position: relative; padding-right: 6px; padding-left: 6px; font-family: Roboto, Arial, sans-serif; font-size: 10px; color: rgb(68, 68, 68); white-space: nowrap; direction: ltr; text-align: right; vertical-align: middle; display: inline-block;"></div></div></div><div style="position: absolute; left: -1600px; top: -900px; width: 1600px; height: 900px; visibility: hidden;"></div><div style="position: absolute; left: -1600px; top: -900px; width: 1600px; height: 900px; visibility: hidden;"></div>
<script src="https://maps.googleapis.com/maps-api-v3/api/js/22/8/intl/ro_ALL/main.js"></script><iframe name="gm-master" src="https://www.google.com/maps/api/js/master?pb=!1m2!1u22!2s8!2sro-RO!3sUS!4s22/8/intl/ro_ALL#WyI4bXBpYzBoeG12IiwiIl0." style="visibility: hidden; position: absolute; left: 0px; top: 0px; width: 0px; height: 0px;"></iframe>
</body>
</html>