Caricamento pagina e spreco banda

mandroid

Utente Attivo
8 Lug 2013
56
0
0
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>"; 
}
?>
 

mandroid

Utente Attivo
8 Lug 2013
56
0
0
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.
 
Ultima modifica:

Longo8

Utente Attivo
28 Mar 2011
1.694
0
36
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

Utente Attivo
8 Lug 2013
56
0
0
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

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
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
 

mandroid

Utente Attivo
8 Lug 2013
56
0
0
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

Utente Attivo
8 Lug 2013
56
0
0
....tutto questo mi porta ad una visualizzazione di una singola immagine vuota: porzione angolo in alto a sinistra index.php

index.png
 

Allegati

Ultima modifica:

mandroid

Utente Attivo
8 Lug 2013
56
0
0
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>
 
Ultima modifica:

mandroid

Utente Attivo
8 Lug 2013
56
0
0
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?
 
Ultima modifica:

borgo italia

Super Moderatore
Membro dello Staff
SUPER MOD
MOD
4 Feb 2008
16.042
146
63
PR
www.borgo-italia.it
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

Utente Attivo
8 Lug 2013
56
0
0
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;
}
 
Ultima modifica: