Visualizzazione dei risultati da 1 a 6 su 6
  1. #1
    Utente di HTML.it L'avatar di Davy96
    Registrato dal
    Jun 2012
    Messaggi
    91

    Mostrare qualcosa prima che l'immagine venga caricata [jquery]

    Salve a tutti ...come avrete capito dal titolo di questo topic ho proprio bisogno di uno script jquery che ,intanto che venga caricata un'immagine "esterna", mostri una barra di caricamento o qualcos'altro.
    Ho provato a fare qualcosa da solo o a trovare qualche script da internet...ma si vede che io e jquery non andiamo d'accordo!
    Siccome penso che la soluzione sia abbastanza elementare e di pochi righi ,volevo chiedervi se qualcuno di voi può darmi una mano nell'impostare il codesto script.


    Grazie in anticipo!
    "Il rischio più grande di tutti? Non rischiare."(Anonimo)
    "Le persone possono dubitare di ciò che dici ma crederanno a ciò che fai."
    (Lewis Cass)

  2. #2
    Ci avevo pensato anch'io e ho buttato giù questa piccola libreria:

    codice:
    $().ready(function() {
    $("img.load, img.load32, img.load64, img.load128, img.load256, img.load480, img.load640").one('load', function()
    				{var nimg=$(this).prop('nimg');
    				 $(this).removeProp('nimg');
    				 $("div.loading").each(function(i)
    						{if(nimg==$(this).prop('nimg'))
    							{$(this).fadeOut(900);
    							 $(this).removeProp('nimg');
    							 return false;}
    						});
    				}).each(function(i)
    				{{var elem=jQuery('<div class="loading"></div>');
    				  var size=$(this).attr('class');
    				  size=size.substr(size.search("load")+4,3);
    				  if(size[0]==' ' || size=='')
    						size='128';
    					 elem.copyCSS($(this),'border');
    					 elem.css({"position":"absolute","background":"#DADADB url(\'/immagini/loading"+size+".gif\') no-repeat","height":$(this).css('height'),
    									"width":$(this).css('width'),"background-position":"center center","opacity":"1","z-index":"999"});
    					 
    					 elem.offset($(this).offset());
    					 
    					 $('body').prepend(elem);
    					 $(this).prop('nimg', i);
    					 elem.prop('nimg', i);
    					}
    				
    				if(this.complete)
    					$(this).load();
    				});
    });
    Ho messo delle gif animate nella cartella 'immagini' di varie dimensioni chiamate loading32.gif, loading64.gif ecc. e con questo codice mettendo la classe load (è come load128), load32, load64 ecc. a un tag <img> copre l'immagine con quella nella cartella mentre si carica e poi se ne va con un fadeOut. A tua scelta puoi usare queste righe
    codice:
    if(this.complete)
       $(this).load();
    oppure eliminarle: servono a rendere il caricamento più rapido se l'immagine era già stata caricata precedentemente, ma se l'immagine è molto grande in alcuni casi sparisce il caricamento e mostra l'immagine mentre si disegna riga per riga.
    Spero di esserti stato di aiuto.

  3. #3
    Utente di HTML.it L'avatar di Davy96
    Registrato dal
    Jun 2012
    Messaggi
    91
    Ah interessante ... usare le ultime righe servono nel mio caso ..perche' in un refresh le immagini vegono caricate dalla cache ..quindi ci mettono un tempo minore, quindi grazie davvero!
    adesso l'impresa sara' integrarlo nel sito, data la mia inesperienza
    "Il rischio più grande di tutti? Non rischiare."(Anonimo)
    "Le persone possono dubitare di ciò che dici ma crederanno a ciò che fai."
    (Lewis Cass)

  4. #4
    Devi solo metterlo in un foglio .js e includerlo nel <head>

  5. #5
    Utente di HTML.it L'avatar di Davy96
    Registrato dal
    Jun 2012
    Messaggi
    91
    Ahhh...niente da fare non riesco a farlo funzionare ...sarà per il fatto che le immagini vengono generate dinamicamente
    "Il rischio più grande di tutti? Non rischiare."(Anonimo)
    "Le persone possono dubitare di ciò che dici ma crederanno a ciò che fai."
    (Lewis Cass)

  6. #6
    Devi creare un tag html tipo:
    codice HTML:
    <img class="load" id="img1" style="width:250px;height:200px;" src="myimg.jpg" alt="immagine"/>
    Ci devono essere width e height nello stile per dare le dimensioni alla immagine di caricamento. Inoltre devi eliminare questa linea:
    codice:
    elem.copyCSS($(this),'border');
    Scusa, ma mi ero scordato di toglierla perchè chiama una funzione in un altra libreria.

Permessi di invio

  • Non puoi inserire discussioni
  • Non puoi inserire repliche
  • Non puoi inserire allegati
  • Non puoi modificare i tuoi messaggi
  •  
Powered by vBulletin® Version 4.2.1
Copyright © 2025 vBulletin Solutions, Inc. All rights reserved.