Caricamento pagina e spreco banda

mandroid · 31 Lug 2013

Ciao,

la pagina che carica la galleria ha molte immagini per ora da 6000 a 10000 ho visto che viene sprecata molta banda perchè le immagini vengono caricate tutte insieme, ma girando sulla rete ho visto dei plugin tipo LazyLoad che serve per caricare solo quello che serve in dato momento e non tutte le immagini, ho provato anche infinite scroll che più o meno ha la stessa funzione.

Il fatto è che questi plugin funzionano solo con i singoli link e non con lo script che uso io: quindi per il mio problema non vanno bene avendo tantissime immagini da caricare.

Esiste una soluzione?
L'effetto che vorrei ottenere è tipo questo: http://alexandrupitea.ro/nettuts/scroll/

Grazie.

Mio script:

PHP:

<?php
$directory = "imgfold/animals/*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
    echo "<li><a href=\"imgfold/animals/$file\"><img src=\"imgfold/animals/thumb/$file\" alt=\"- $ch\" /></a></li>"; 
}
?>

Longo8 · 2013-08-01T09:56:14+0200

Prova a vedere questo tutorial che è molto più chiaro e semplice rispetto a quello che hai visto tu. Poi magari passi all'altro una volta che hai capito come si fa. Oppure (meglio ancora) ne crei uno tuo personalizzato sulla base di questo.

mandroid · 2013-08-01T19:03:24+0200

Ciao grazie per la risposta,
ho visto quello che mi hai detto tu ma usa un database, io non uso database uso jquery e lo script qui sopra per caricare le immagini, devo creare un database per fare quello che ho in mente? oppure c'è una soluzione più semplice? io ho neccesità solo di salvare il consumo eccesivo di banda.

Longo8 · 2013-08-02T08:35:14+0200

Su usa il db ma non è difficile usare altro al posto del db.
Ci sono due parti dove lo usa:
1) quando stampa le prime (12) immagini.
2) quando con la chiamata ajax va a prendere 12 immagini altre ogni volta.
Quindi basta modificare un po' il codice e farle prendere da una cartella e non dal db.

mandroid · 2013-08-02T11:05:26+0200

per chi sa dove mettere le mani non e' difficile

... ancora una cosa siccome il mio e' anche sito per mobile jquerymobile ho visto che funziona solo firefox no opera no chrome no android.

borgo italia · 2013-08-02T11:26:22+0200

ciao
basta che a quel while tu sostituisc il tuo foreach

PHP:

<?php
//....
while ($row = mysql_fetch_array($result)) {
	$html .= "</pre>
	<div><img src="images/&quot; . $row[" alt="" name="" /></div>
	<pre>";
}
echo $html;
exit;
?>

così

PHP:

<?php
//...
$directory = "imgfold/animals/*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
    //echo "<li><a href=\"imgfold/animals/$file\"><img src=\"imgfold/animals/thumb/$file\" alt=\"- $ch\" /></a></li>"; 
	$html .= "</pre>
	<div><a href=\"imgfold/animals/$file\"><img src=\"imgfold/animals/thumb/$file\" alt=\"- $ch\" /></a></div>
	<pre>";
}
echo $html;
exit;
?>

prova e sappimi dire
per quanto riguarda mobile jquerymobile non so dirti

Longo8 · 2013-08-02T11:43:18+0200

borgo italia ha scritto:
ciao
basta che a quel while tu sostituisc il tuo foreach

E ovviamente devi eliminare la connessione al db, le query e tutto ciò che riguarda il db.

mandroid · 2013-08-02T19:24:05+0200

borgo italia ha scritto:

ciao
basta che a quel while tu sostituisc il tuo foreach

PHP:

<?php
//....
while ($row = mysql_fetch_array($result)) {
	$html .= "</pre>
	<div><img src="images/&quot; . $row[" alt="" name="" /></div>
	<pre>";
}
echo $html;
exit;
?>

così

PHP:

<?php
//...
$directory = "imgfold/animals/*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
    //echo "<li><a href=\"imgfold/animals/$file\"><img src=\"imgfold/animals/thumb/$file\" alt=\"- $ch\" /></a></li>"; 
	$html .= "</pre>
	<div><a href=\"imgfold/animals/$file\"><img src=\"imgfold/animals/thumb/$file\" alt=\"- $ch\" /></a></div>
	<pre>";
}
echo $html;
exit;
?>

prova e sappimi dire
per quanto riguarda mobile jquerymobile non so dirti

Ciao,
allora ho fatto così ho creato una cartella sul mio server ho lavorato direttamente sul codice originale senza inserire il mio con i collegamenti a jquerymobile ho aggiunto solo in index.php jquery 1.7.1 sul loro cdn
codice originale data.php:

PHP:

<?php
$requested_page = $_POST['page_num'];
$set_limit = (($requested_page - 1) * 12) . ",12";
$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");
$result = mysql_query("select  * from scroll_images order by id asc limit $set_limit");
$html = '';
while ($row = mysql_fetch_array($result)) {
    $html .= "<div><img src='images/" . $row['name'] . ".jpg' /></div>";
}
echo $html;
exit;
?>

codice modificato senza database data.php:

PHP:

 <?php
$directory = "imgfold/animals/*.jpg";
$files=glob($directory);
$files=array_map("basename", $files);
foreach($files as $ch => $file){
    //echo "<li><a href=\"imgfold/animals/$file\"><img src=\"imgfold/animals/thumb/$file\" alt=\"- $ch\" /></a></li>";
    $html .= "</pre>
    <div><a href=\"imgfold/animals/$file\"><img src=\"imgfold/animals/thumb/$file\" alt=\"- $ch\" /></a></div>
    <pre>";
}
echo $html;
exit;
?>

codice originale index.php:

PHP:

<?php
$con = mysql_connect("localhost", "username", "password");
mysql_select_db("database_name");

$result = mysql_query("select SQL_CALC_FOUND_ROWS * from scroll_images order by id asc limit 12");

$row_object = mysql_query("Select Found_Rows() as rowcount");
$row_object = mysql_fetch_object($row_object);
$actual_row_count = $row_object->rowcount;
?>

<html lang='en'>
    <head>
        <title>Infinite Scroll</title>
        <script src="jquery-1.7.2.js" type="text/javascript"></script>
        <style>
            #result div{
		border: 10px solid #EEEEEE;
    		float: left;
    		height: 300px;
    		margin: 20px;
    outline: 1px solid #CFCFCF;
    width: 300px;
		
	    }
	    #more{
		background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CFCFCF;
    color: #000000;
    display: none;
    font-weight: bold;
    left: 1100px;
    padding: 5px;
    position: fixed;
    top: 100px;

	    }
	    #no-more{
		background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CFCFCF;
    color: #000000;
    display: none;
    font-weight: bold;
    left: 1100px;
    padding: 5px;
    position: fixed;
    top: 100px;

	    }
	    #result{
		
	    }
        </style>
        <script type="text/javascript">
            var page = 1;


            $(window).scroll(function () {
                $('#more').hide();
                $('#no-more').hide();

                if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                    $('#more').css("top","400");
                    $('#more').show();
                }
                if($(window).scrollTop() + $(window).height() == $(document).height()) {

                    $('#more').hide();
                    $('#no-more').hide();

                    page++;

                    var data = {
                        page_num: page
                    };

                    var actual_count = "<?php echo $actual_row_count; ?>";

                    if((page-1)* 12 > actual_count){
                        $('#no-more').css("top","400");
                        $('#no-more').show();
                    }else{
                        $.ajax({
                            type: "POST",
                            url: "data.php",
                            data:data,
                            success: function(res) {
                                $("#result").append(res);
                                console.log(res);
                            }
                        });
                    }

                }


            });

        </script>




    </head>

    <body>
        <div id='more' >Loading More Content</div>
        <div id='no-more' >No More Content</div>
        <div id='result'>
            <?php
            while ($row = mysql_fetch_array($result)) {
                echo "<div><img src='images/" . $row['name'] . ".jpg' /></div>";
            }
            ?>
        </div>


    </body>
</html>

codice modificato senza database index.php:

PHP:

<html lang='en'>
    <head>
        <title>Infinite Scroll</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
        <style>
            #result div{
		border: 10px solid #EEEEEE;
    		float: left;
    		height: 300px;
    		margin: 20px;
    outline: 1px solid #CFCFCF;
    width: 300px;
		
	    }
	    #more{
		background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CFCFCF;
    color: #000000;
    display: none;
    font-weight: bold;
    left: 1100px;
    padding: 5px;
    position: fixed;
    top: 100px;

	    }
	    #no-more{
		background: none repeat scroll 0 0 #EEEEEE;
    border: 1px solid #CFCFCF;
    color: #000000;
    display: none;
    font-weight: bold;
    left: 1100px;
    padding: 5px;
    position: fixed;
    top: 100px;

	    }
	    #result{
		
	    }
        </style>
        <script type="text/javascript">
            var page = 1;


            $(window).scroll(function () {
                $('#more').hide();
                $('#no-more').hide();

                if($(window).scrollTop() + $(window).height() > $(document).height() - 200) {
                    $('#more').css("top","400");
                    $('#more').show();
                }
                if($(window).scrollTop() + $(window).height() == $(document).height()) {

                    $('#more').hide();
                    $('#no-more').hide();

                    page++;

                    var data = {
                        page_num: page
                    };

                    var actual_count = "<?php echo $actual_row_count; ?>";

                    if((page-1)* 12 > actual_count){
                        $('#no-more').css("top","400");
                        $('#no-more').show();
                    }else{
                        $.ajax({
                            type: "POST",
                            url: "data.php",
                            data:data,
                            success: function(res) {
                                $("#result").append(res);
                                console.log(res);
                            }
                        });
                    }

                }


            });

        </script>




    </head>

    <body>
        <div id='more' >Loading More Content</div>
        <div id='no-more' >No More Content</div>
        <div id='result'>
            <?php
         //   while ($row = mysql_fetch_array($result)) { <--------linea database commentata[/COLOR]
            echo "<div><img src='imgfold/animals/thumb/" . $row['name'] . ".jpg' /></div>"; <---  Ho cambiato percorso ma mi visualizza un quadrato senza immagine anche con percorso originale
          //  }
            ?>
        </div>


    </body>
</html>

Questo l'ho lasciato invariato non ho capito ancora se mi serve:

PHP:

<?php 
mysql_connect("localhost", "root" , "");
mysql_select_db("world");
if($_GET['lastComment']){
$sqlQuery = mysql_query('SELECT * FROM World_country WHERE id > "'.mysql_real_escape_string($_GET['lastComment']).'" ORDER BY id ASC LIMIT 0 , 30');
$val = $_GET['lastComment'];
while($data = mysql_fetch_object($sqlQuery)) {
$id = $data->id;
$name = $data->Name ;
$continent = $data->Continent;
$population = $data->Population ;
echo "
<div class='postedComment' id=\"$data->id \">
<center>
<b>Country : </b>"."$name <br /> 
<b>Continent : </b>" ."$continent<br/>
<b>Population  : </b>"." $population<br>
<i style=\"color:blue\">Index nr."."$id</i>
<hr /> 
</center>
</div> 
" ;

}

}
?>

mandroid · 2013-08-02T19:46:53+0200

....tutto questo mi porta ad una visualizzazione di una singola immagine vuota: porzione angolo in alto a sinistra index.php

mandroid · 2013-08-05T11:45:20+0200

Ciao,
allora ho optato per un'altra soluzione, però ho 2 tipi di problemi il primo è che vorrei fare usare il mio css altrimenti mi sballa tutto il lavoro della galleria, l'altro invece è che quando clicco sulla miniatura vengo indirizzato all'immagine, ma non appare, se aggiorno la pagina si ma senza effetto slide.
<div id="container"> <------------------- Colui che mi crea il "problema col CSS non so con cosa sostituirlo se lo cambio non funzia più lo scrolling

PHP:

<body onload="setInterval('scroll();', 250);">
<div id="header">Infinite Scroll</div>
<div id="container">    <------------------- Colui che mi crea il "problema col CSS non so con cosa sostituirlo se lo cambio non funzia più lo scrolling
	
<p>Content Here</p> <a href="#header"></a>
<br />
<hr />
</div>
</body>

<script>
var contentHeight = 800;
var pageHeight = document.documentElement.clientHeight;
var scrollPosition;
var n = 10;
var xmlhttp;

function putImages(){
	
	if (xmlhttp.readyState==4) 
	  {
		  if(xmlhttp.responseText){
			 var resp = xmlhttp.responseText.replace("\r\n", ""); 
			 var files = resp.split(";");
			  var j = 0;
			  for(i=0; i<files.length; i++){
				  if(files[i] != ""){
					 document.getElementById("container").innerHTML += '<a href="imgfold/animals/'+files[i]+'"><img src="imgfold/animals/thumb/'+files[i]+'" /></a>';
					 j++;
				  
					 if(j == 3 || j == 6)
						  document.getElementById("container").innerHTML += '<br />';
					  else if(j == 9){
						  document.getElementById("container").innerHTML += '<p>'+(n-1)+" Images Displayed | <a href='#header'>top</a></p><br /><hr />";
						  j = 0;
					  }
				  }
			  }
		  }
	  }
}
		
		
function scroll(){
	
	if(navigator.appName == "Microsoft Internet Explorer")
		scrollPosition = document.documentElement.scrollTop;
	else
		scrollPosition = window.pageYOffset;		
	
	if((contentHeight - pageHeight - scrollPosition) < 500){
				
		if(window.XMLHttpRequest)
			xmlhttp = new XMLHttpRequest();
		else
			if(window.ActiveXObject)
				xmlhttp = new ActiveXObject("Microsoft.XMLHTTP");
			else
				alert ("Bummer! Your browser does not support XMLHTTP!");		  
		  
		var url="getImages.php?n="+n;
		
		xmlhttp.open("GET",url,true);
		xmlhttp.send();
		
		n += 9;
		xmlhttp.onreadystatechange=putImages;		
		contentHeight += 800;		
	}
}

</script>

mandroid · 2013-08-05T13:16:41+0200

.....per i collegamenti dalla miniatura all'immagine ho risolto!

ora manca il CSS

borgo italia · 2013-08-05T14:02:43+0200

ciao
credo che ti convenga cercare nel css

Codice:

#container{
/*vari parametri*/
}

e aggiustarlo come ti serve

mandroid · 2013-08-06T11:07:22+0200

Ho provato a cambiare il #container ma il problema è che il #container usa il <div id e mi sballa tutto compreso lo swipe...... invece il resto del CSS usa il <div class. Posso trsformare il <div id in <div class? Oppure come posso fare?

borgo italia · 2013-08-06T11:33:16+0200

ciao
per cambiare da id a class basterebbe togliere # e mettere .

Codice:

.container{
/*vari parametri*/
}

per cui il div può diventare <div class="container>
però non so se il js usa l'id quindi può andare in pallino tutto
posta eventualmente la parte del css relativa a container e spiega cosa vorresti

mandroid · 2013-08-06T12:15:23+0200

Ciao,
allora intanto ti posto i risultati: http://pixemitter.com/animals2.php questo è il risultato finale senza lo scroll
invece questo è con lo scroll: http://pixemitter.com/animals.php

Codice:

#container{
	margin: 0 auto;
	width:800px;
	border:1px solid #333;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
}

questo è quello completo #container

Codice:

@charset "utf-8";
/* CSS Document */

body{
	background:#222;
	color:#666;
}

#header{
	font-family:Arial, Helvetica, sans-serif;
	font-size:24px;
	font-weight:bold;
	text-align:left;
	text-indent:35px;
	margin: 0 auto;
	width:800px;
	margin-bottom:10px;
}

hr{
	margin: 20px;
	border:none;
	border-top: 1px solid #111;
	border-bottom: 1px solid #333;
}

p{
	color:#444;
	text-align:left;
	font-size:10px;
	margin-left: 20px;
	margin-bottom: -10px;
}

a{
	color:#444;
}



#container{
	margin: 0 auto;
	width:800px;
	border:1px solid #333;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	font-family:Verdana, Geneva, sans-serif;
	text-align:center;
}

img{
	border:10px solid #444;
	-moz-border-radius: 5px;
	-webkit-border-radius: 10px;
	margin: 15px;
}

img:hover{
	border-color:#555;
	-moz-box-shadow: 0px 0px 15px #111;
	-webkit-box-shadow: 0px 0px 15px #111;
}

mandroid · 2013-08-06T12:49:44+0200

PS: provalo anche da mobile....

Cerca

Cerca

Caricamento pagina e spreco banda

mandroid

Utente Attivo

Longo8

Utente Attivo

mandroid

Utente Attivo

Longo8

Utente Attivo

mandroid

Utente Attivo

borgo italia

Super Moderatore

Longo8

Utente Attivo

mandroid

Utente Attivo

mandroid

Utente Attivo

Allegati

mandroid

Utente Attivo

mandroid

Utente Attivo

borgo italia

Super Moderatore

mandroid

Utente Attivo

borgo italia

Super Moderatore

mandroid

Utente Attivo

mandroid

Utente Attivo

Discussioni simili