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>"; 
}
?>
 

Longo8

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

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.046
150
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

  • indexpix.png
    indexpix.png
    3,9 KB · Visite: 312
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.046
150
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:
Discussioni simili
Autore Titolo Forum Risposte Data
M Caricamento pagina e spreco banda PHP 4
X Dichiarare variabili solo al caricamento della pagina PHP 3
MarcoGrazia [Javascript] Loader fino a caricamento della pagina Javascript 1
E [Javascript] div "si sposta" al caricamento della pagina web Javascript 2
I caricamento pagina PHP 1
M Caricamento script php pagina bianca Javascript 2
C Attendere caricamento pagina prima di autologin Javascript 4
E Realizzare una finestra overlay con caricamento pagina html HTML e CSS 3
S Generare pagina dopo il caricamento di un dato PHP 6
felino Lentezza all'apertura e al caricamento della pagina, anche in backend WordPress 1
lucolo Caricamento pagina infinito HTML e CSS 1
G Attesa caricamento pagina PHP 0
kungfujava Bootstrap e animazione caricamento pagina HTML e CSS 0
P Problema: visualizzare a schermo una nuova pagina durante l'attesa di caricamento PHP 1
P JS al caricamento della pagina Javascript 1
C Immagine di caricamento pagina (preload) jQuery 1
T Click automatico su pagina web al caricamento jQuery 0
F caricamento pagina Javascript 4
S Form PHP: Messaggio di conferma che compare al caricamento della pagina PHP 11
zerobit Query automatica al caricamento pagina PHP 18
I attivare funzione su link al caricamento della pagina Javascript 6
G problema caricamento 2 js nella stessa pagina Javascript 0
M Problema caricamento immagini - refresh pagina PHP 7
M Immagine di loading prima del caricamento di una pagina php. PHP 0
K Div e non caricamento pagina Javascript 1
R aggiornare pagina senza vedere caricamento PHP 2
M Aprire popup al caricamento della pagina Javascript 3
G Pagine in flash, modificare solo una parte della pagina al caricamento Flash 0
Dragon Problema di caricamento swf e img nella stessa pagina Flash 8
B Propblema caricamento pagina Ajax 6
mythar Problema caricamento pagina ASP.NET 1
X eventi caricamento pagina Javascript 0
A Ordine caricamento pagina web HTML e CSS 0
4 Immagine di caricamento di una pagina HTML e CSS 0
D rotella di caricamento che si toglie quando parte il download Ajax 0
I caricamento file in sottocartella nome utente PHP 3
Y CARICAMENTO PARZIALE Javascript 1
R Cambiare il nome dell'immagine dopo caricamento ftp HTML e CSS 0
F Caricamento index rotto PHP 1
L Caricamento dominio con FTP già preesistente in rete Domini 2
R Caricamento immagine su cartella remota + mysql PHP 3
G Problema caricamento tabelle MySql da PhP PHP 0
N caricamento listini (Indesign) Webdesign e Grafica 0
A Caricamento file csv MySQL 2
A [PHP] Caricamento database in array PHP 11
J [Javascript] Inserire un caricamento con animazione prima dell'esecuzione di un'azione Javascript 1
M [Javascript] Caricamento menu da file esterno Javascript 8
M [javascript] Aggiungere eventi al caricamento Javascript 0
F [HTML] Caricamento Audio con matching HTML e CSS 10
T [PHP] rendere facoltativo il caricamento di un file PHP 5

Discussioni simili