Transizioni immagini molto lente...

cavaliere123

Utente Attivo
31 Lug 2012
416
0
16
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

Utente Attivo
31 Lug 2012
416
0
16
E altra domanda.. se riduco le dimensioni di tutte le immagini de blog ottengo qualche miglioramento in velocità?
Grazie :)
 

Vale2

Utente Attivo
28 Mag 2006
446
0
0
Livorno
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

Utente Attivo
31 Lug 2012
416
0
16
D'accordo e grazie Valeria del suggerimento.... mi ci vorrebbe uno script che me controlla tutti sti errori :D

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.... :(
 
Discussioni simili
Autore Titolo Forum Risposte Data
elpirata Realizzare video con immagini testo e transizioni Windows e Software 5
R effetti nelle transizioni di immagini Javascript 2
P Transizioni CSS in Dreamweaver CS6 HTML e CSS 0
S [VB.NET]: Coordinate immagini dentro una PictureBox Visual Basic 0
G Perché il mio sito su Google news fa vedere le immagini degli articoli la mia foto profilo? WordPress 1
M Immagini non usate WordPress 0
elmonarca77 Utilizzo e licenze immagini Webdesign e Grafica 4
S Risoluzione Immagini e Connessione Joomla 0
G Il mio sito dopo aver abilitato l'ssl non visualizza le immagini con indirizzi senza ssl HTML e CSS 0
A WordPress e immagini Hosting 0
Y RITAGLIO IMMAGINI Javascript 0
R Immagini html HTML e CSS 2
E Come gestire al meglio le immagini legno grande formato Photoshop 0
M Random Immagini + Testi PHP 13
L form immagini per il database PHP 0
Ricky80 Coordinazione immagini HTML e CSS 4
P Percorsi e immagini. PHP 0
N Indicizzazione immagini su Google Google Search Console 0
L Import Immagini piattaforma IONIC Sviluppo app per Android 0
L Import massivo di immagini in tabelle piattaforma IONIC Presentati al Forum 1
P Script upload immagini jQuery 0
E Salvare immagini PHP 0
S problema salvataggio immagini Photoshop 0
R Immagini scontornate: che formato? HTML e CSS 4
A Sovrapposizione Immagini Photoshop 0
Cosina Mostrare immagini da una cartella, ma solo un numero definito PHP 12
Tommy03 Gestire dimensioni immagini PHP 4
M Aiuto con inserimento immagini WordPress 6
L Scmporre una foto dotata di varie immagini in piu layer Photoshop 2
M Impossibile visionare la immagini dall'App. IP Cam e Videosorveglianza 8
A Array di immagini Sviluppo app per Android 10
L Come spostare cartella immagini/video PHP 1
A Cornici immagini per sito Web Wordpress WordPress 1
M Semplice visualizzatore di immagini [risolto con plugin wp] PHP 7
R uploader di immagini e text PHP 0
S Importazione immagini PHP 3
beatle [Photoshop] problema inserimento immagini Photoshop 1
L [PHP] Invio Immagini PHP 1
I [PHP] generazione url "uguale" che punta a due immagini diverse PHP 0
W Immagini professionali a costi sostenibili Discussioni Varie 1
bluebirdoncanvas [Photoshop] problema dimensioni immagini o zoom Photoshop 0
andreas88 Immagini non leggibili dopo trasferimento alla scheda SD Smartphone e tablet 0
zorro Aggiunta di immagini al sito Leggi, Normative e Fisco 0
M [PHP] Selezionare immagini directory non presenti in db PHP 11
romeocharly [PHP] Script per rinominare in automatico le immagini inviate da ftp PHP 0
I [PHP] Immagini caricate su server diverse da quelle mostrate PHP 19
kiai969 Stesse immagini su WordPress SEO e Posizionamento 2
L [HTML] Problemino con le immagini di sfondo HTML e CSS 4
A [Photoshop] Ritagliare cerchi tutti uguali da diverse immagini Photoshop 2
F [PHP] Galleria immagini PHP 6

Discussioni simili