Transizioni immagini molto lente...

cavaliere123 · 24 Ott 2012

Buongiorno a tutti ....
Ho trovato un effetto per le transizioni per le immagini che mi è piaciuto molto e precisamente questo :

http://www.netzgesta.de/transm/eyewitness.html

e l'ho modificato cosi :

HTML:

<!DOCTYPE >
<html>
<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta http-equiv="Content-language" content="en" />
	<meta http-equiv="imagetoolbar" content="no" />
	<meta http-equiv="Content-Style-Type" content="text/css" />
	<link rel="icon" href="favicon.ico" type="image/ico">
	<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">

	<style type="text/css">


		table.gifc { 
                        width:920px;
			height:320px;
                        text-align:center;

                         background-image:url(http://3.bp.blogspot.com/-CSxANBRTDBE/UIRfXBPiQuI/AAAAAAAAELs/5sH7YSUL4iI/s1600/sfondo+nero.png);
                        border: 5px  red solid; 


		}

                     .stile { margin: 0 1%  ; }



	</style>
	<meta http-equiv="Content-Script-Type" content="text/javascript" />
	<script type="text/javascript" src="https://sites.google.com/site/provacavalierierranti/home/cvi_tween_lib.js"></script>
	<script type="text/javascript" src="https://sites.google.com/site/provacavalierierranti/home/cvi_trans_lib.js"></script>
	<script type="text/javascript" src="https://sites.google.com/site/provacavalierierranti/home/transm.js?attredirects=0&d=1"></script>
<script type="text/javascript">
<!--
var pics = new Array();
pics = [
	{source:'http://2.bp.blogspot.com/-Yr23yOm2wp4/UIRfVpd3NSI/AAAAAAAAELg/5Cok1WQXX50/s1600/sanmichele.png',transition:'iris_star_in'},
	{source:'http://1.bp.blogspot.com/-14H3gxqWgS8/UIRfUvbFCNI/AAAAAAAAELE/118sqQYeQDg/s1600/TEMPLARI.jpg',transition:'iris_cross_in'},
	{source:'http://1.bp.blogspot.com/-Oqs0iWcJD0k/UIRfORgk-7I/AAAAAAAAEKQ/yL_i6U_26o4/s1600/MALTA.jpg',transition:'radialgradient'},
	{source:'http://4.bp.blogspot.com/-KeJOjMUhUNE/UIRfYLdEVwI/AAAAAAAAELw/w-iMY09zvJE/s1600/stemmasantiago.png',transition:'iris_circle_in'},
	{source:'http://2.bp.blogspot.com/-HVuMdoDDKWY/UIRfVADfhuI/AAAAAAAAELo/RaXhwtb6ewM/s1600/TEUTONICI.jpg',transition:'wheel',option1:12},
	{source:'http://4.bp.blogspot.com/-LueWb2HhxQw/UIRfSVA037I/AAAAAAAAEK0/ixnEbneyvvE/s1600/SEPOLCRO.jpg',transition:'radialwipe_clock'},
	{source:'http://3.bp.blogspot.com/-dbmsYizdR9Y/UIRfXYgeGvI/AAAAAAAAEL8/NnG7Pd4EJzE/s1600/stemmasanmaurizio.png',transition:'radialwipe_wedge'},
	{source:'http://1.bp.blogspot.com/-2ThwNoYbeCw/UIRfUC7GcoI/AAAAAAAAELA/vybCBnQKMbM/s1600/StemmaCostantiniano.png',transition:'iris_plus_in'},
];

var opts = new Object();
opts = {
	width:160,
	height:165,

	timeout:5,
	delay: 5,


	mopacity: 0.5, 
	fadein:true,
	autoplay:true,
	clearbg:true,
	data: pics
};







var picso = new Array();
picso = [
	{source:'http://4.bp.blogspot.com/-bl_k_YzZ5YE/UIRfQN3v-dI/AAAAAAAAEKc/NXiWhVocnG4/s1600/Nullaveri1.png',transition:'iris_star_in'},
	{source:'http://4.bp.blogspot.com/-OpA2ncrg-cM/UIRfRjMQylI/AAAAAAAAEKs/kcO9DXr5Dkg/s1600/SCRTEMPLARI.png',transition:'iris_cross_in'},
	{source:'http://1.bp.blogspot.com/-qRzaPkbKyU0/UIRfPrUB5XI/AAAAAAAAEKg/GjLoI7WPp9I/s1600/Malta1.png',transition:'radialgradient'},
	{source:'http://2.bp.blogspot.com/-sNvqh8qp82A/UIRfTZzZb6I/AAAAAAAAEK4/fK64TGERLco/s1600/Santiago1.png',transition:'iris_circle_in'},
	{source:'http://1.bp.blogspot.com/-QLVoljHAltU/UIRfVakeMPI/AAAAAAAAELY/JdNPjnNqRkw/s1600/Teutonici1.png',transition:'wheel',option1:12},
	{source:'http://3.bp.blogspot.com/-Kdskqf2v6oE/UIRfT2udayI/AAAAAAAAELM/xOpO9Whh4uM/s1600/Sepolcro1.png',transition:'radialwipe_clock'},
	{source:'http://2.bp.blogspot.com/-vZZWN4vOazo/UIRfSzlubGI/AAAAAAAAEK8/BNxynwqP-Q8/s1600/San+Lazzaro1.png',transition:'radialwipe_wedge'},
	{source:'http://3.bp.blogspot.com/-jDAEvvCQZIw/UIRfOW4SB1I/AAAAAAAAEKU/6JDEmJ7C2_U/s1600/Costantiniani1.png',transition:'iris_plus_in'},
];

var optso = new Object();
optso = {
	width:200,
	height:191,

	timeout:5,
	delay: 5,


	mopacity: 0.5, 
	fadein:true,
	autoplay:true,
	clearbg:true,
	data: picso
};

if(typeof x=='undefined') {function x(v) {return(document.getElementById(v));}}
window.onload = function () { 
	        	transm.add(x("wrapper"),opts);
transm.add(x("wrappero"),optso);
};

-->	
</script>

</head>
<body>
<div class="stile">
<table class= " gifc"  
 cellpadding="2" cellspacing="2">
  <tbody>
    <tr>
      <td id="wrapper" class= "wrap" ></td>
      <td class= "wrap" style="width: 35%; text-align:right"><img src="http://1.bp.blogspot.com/-uJqZaBuNnfs/UIRfQ9bO-DI/AAAAAAAAEKo/h9s0PV4xCF4/s1600/CAVALIERIERRANTI.png"  width="281" height="310"  alt="" /></td>
      <td id="wrappero" class= "wrap" style="width: 20%;"></td>
    </tr>
  </tbody>
</table></div>

</body>
</html>

e funziona stranamente per me

Ma h notato che una volta messo sul blog per caricarsi ci mette tempo... e poi è lento...
C'è un qualcosa di più leggero m con gli stessi effetti di transizione ??

Guardate se non vi spiace sul blog ed è l'immagine con lo scudo centrale e i due riquadri che variano ai lati il tutto in una tabella bordata di rosso

Grazie . Domenico.

cavaliere123 · 24 Ott 2012

E altra domanda.. se riduco le dimensioni di tutte le immagini de blog ottengo qualche miglioramento in velocità?
Grazie

Vale2 · 24 Ott 2012

Ciao Domenico,

dovresti sistemare il tutto, a parte la pesantezza della tua pagina, hai richiami a immagini che sono ostate su diversi server, stesso per i javascript.

sono più di 3000 righe di codici, e ci sono molti errori di codice html.

Il caricamento del blog prende molte risorse di sistema, per le immagini una volta in cache si stabilizza il tutto.

Scrivi e.s.

Codice:

<script type="text/javascript" src="https://sites.google.com/site/provacavalierierranti/home/saggieepoesie.js";></script>

i ; dopo " prima della chiusura dello script non deve esserci.

Codice:

<script type="text/javascript" src="https://sites.google.com/site/provacavalierierranti/home/saggieepoesie.js"></script>

altro per una dichiarazione none o block, auto e altro dentro un css non si mettono i doppi apici, solo se si trovano in un javascript.

Codice:

 .evito {
                width:90px;
                height:"auto";
                margin: -10px 0px;
                }   

               .evitoint {
                width:340px;
                height:"auto";
                
                }

Codice:

 .evito {
                width:90px;
                height:auto;
                margin: -10px 0px;
                }   

               .evitoint {
                width:340px;
                height:auto;
                
                }

dai una sistemata globale, correggendo gli errori html, controlla il peso di tutte le immagini inserite nel blog ecc...

Valeria.

cavaliere123 · 24 Ott 2012

D'accordo e grazie Valeria del suggerimento.... mi ci vorrebbe uno script che me controlla tutti sti errori

Ascolta anzi leggi .... per quanto concerne la transizione delle immagini con cui ho iniziato la seguente discussione non conosci nulla di più leggero però con lo stesso tipo di transizioni.... se provi te stessa a caricare il mio blog, vedrai che ci mette qualche secondo in più per centrare lo scudo e poi far comparire le immagini a lato....
Io solo questo ho trovato....

Cerca

Cerca

Transizioni immagini molto lente...

cavaliere123

Utente Attivo

cavaliere123

Utente Attivo

Vale2

Utente Attivo

cavaliere123

Utente Attivo

Discussioni simili