Ajutor. Optimizare cod


(Checiu Mihai Andrei) #1

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&amp;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>

Problema Phonegap
(Ionuț Staicu) #2

Ne dai și mai multe detalii?

Se mișcă oribil… ce? Generarea paginii? Randarea?

Poți pune pe codepen un demo?

<script src="https://maps.googleapis.com/maps-api-v3/api/js/22/8/intl/ro_ALL/main.js"></script>

De ce apare ăsta de trei ori?