WebSite X5Help Center

 
Marco S.
Marco S.
User

PreLoader  it

Autor: Marco S.
Visited 2636, Followers 1, Udostępniony 0  

Salve ragazzi... avrei bisogno che qualcuno mi aiutasse a inserire un preloader all'inizio del mio sito web.. avendo diverse foto e video... vorrei che in caso di linea adsl lenta, non mi aprisse le pagine tipo tartaruga lasciandomi a meta foto ecc.. vorrei che ci sia davanti appunto un preloader con un indicatore, e quando tutto il sito è stato caricato a quel punto, aprirlo..  grazie mille

Posted on the
38 ODPOWIEDZI - 2 USEFUL
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... nel programma non c'è questa opzione se non proprio inerente a certi oggetti; ...prova a fare una ricerca in RETE se per caso trovi qualche codice da implementare ed integrare nelle pagine...

... se hai già trovato qualcosa, posta il LINK della fonte, così che qualche esperto possa valutare...

.



Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Claudio D.
Claudio D.
Moderator
Najlepszy Użytkownik miesiąca IT

@Marco, cercando su google ne trovi diversi, però il mio consiglio è di alleggerire la home page, anzichè usare un preloader.

La homepage pesante ti penalizzerà fortemente nei risultati nei motori di ricerca.

I preloader sono ancora più penalizzanti.

Czytaj więcej
Posted on the from Claudio D.
Marco S.
Marco S.
User
Autor
 ‪ KolAsim ‪ ‪
... nel programma non c'è questa opzione se non proprio inerente a certi oggetti; ...prova a fare una ricerca in RETE se per caso trovi qualche codice da implementare ed integrare nelle pagine... ... se hai già trovato qualcosa, posta il LINK della fonte, così che qualche esperto possa valutare... .

Kalos io avevo trovato questo.. avevo bisogno di un paio di dritte per come inserirlo all'interno del lnostro progetto..

Grazie per l'aiuto...

https://github.com/wearede/DePreLoad.js

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... senza programma non posso dirti molto, come anticipato eventualmente attendi gli esperti, ed a prima vista sembra che serva per le immagini...

... comunque, segui le indicazioni che ti forniscono, ed il codice che sta in HEAD lo posizioni nel pannello ESPERTO | Codice personalizzato | prima della chiusura di HEAD, ed il codice assegnato al BODY lo inserisci nello stesso pannello ma nella sezione del BODY...

... oppure usa un simulatore che potrebbe tornarti più semplice, ma devi vedere tu:   http://jqueryui.com/progressbar/

.



Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

Qualche esperto mi può aiutare... gentilmente

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... da quel che vedo  sono state seguite le indicazioni come dette prima per la sezione HEAD e BODY, come da istruzioni della fonte, in questo caso ihatetomatoes...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

Sicuramente non sono l'unico che potrbbe servire questa discussione... è possibile avere da parte vostra una piccola guida...

Czytaj więcej
Posted on the from Marco S.
Marco S.
Marco S.
User
Autor
 ‪ KolAsim ‪ ‪
... da quel che vedo  sono state seguite le indicazioni come dette prima per la sezione HEAD e BODY, come da istruzioni della fonte, in questo caso ihatetomatoes... .

Kalos sto provando ma guarda che scherzo mi fa..? non mi carica home page...aiuto

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... non vedo il LINK ... postalo, almeno si vede sul concreto dove intervenire sulla tua pagina...

... nel caso se ne riparlerà dopo la F1 ...

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor
 ‪ KolAsim ‪ ‪
... non vedo il LINK ... postalo, almeno si vede sul concreto dove intervenire sulla tua pagina... ... nel caso se ne riparlerà dopo la F1 ...

Per poter riprodurre questo..http://www.x5tuts.com/template/agency-v13/index.html puoi indircarmi cosa devo fare..?

grazie Kalos...

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... ricordati che sono senza PC e né programmi...  ...ma è semplice, devi solo seguire le loro istruzioni...
... comunque, dal sito della fonte scaricati i files "downloads":    https://ihatetomatoes.net/create-custom-preloading-screen/
... invia in rete le cartelle CSS e JS con la loro struttura e contenuti nella radice del sito, con client FTP terzo, tipo Filezilla, WS:FTP, e simili, o con il FileManager del server...

... nel pannello ESPERTO del programma, in Codice personalizzato | prima della chiusura di HEAD, incolla:
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/main.css">
<script src="js/vendor/modernizr-2.6.2.min.js"></script>

... nel pannello ESPERTO del programma, in Codice personalizzato | dopo l'apertura del BODY, incolla:
<div id="loader-wrapper"> <div id="loader"></div>
<div class="loader-section section-left"></div> <div class="loader-section section-right"></div>
</div>
... nel pannello ESPERTO del programma, in Codice personalizzato | prima della chiusura del BODY, incolla:
<script>$(document).ready(function() { setTimeout(function(){ $('body').addClass('loaded'); }, 3000); });</script>

... sarà una simulazione...

... se vuoi implementare proprio il controllo del caricamento della pagina, al posto del precedente, e sempre nel pannello ESPERTO del programma, in Codice personalizzato | prima della chiusura del BODY, incolla:
<script> $(function() {  $('#body').addClass('loaded');}); </script>

... è tutto scritto dettagliatamente nella pagina del sito fonte del codice, basta seguire le indicazioni, e nel programma che devo conoscere usare le sezioni dette...
...!... la prossima volta che fai domande in merito a quanto detto, posta il link della pagina in cui stai provando queste istruzioni per capire di eventuali incongruenze dette o fatte e sistemazione del layout...!...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

OK... GRAZIE KALOS.. Adesso provo...

Czytaj więcej
Posted on the from Marco S.
Marco S.
Marco S.
User
Autor

Kalos mi trovo dopo il dowload 2 cartelle "css3-preloader-transition-finish" e "css3-preloader-transition-star"

con all'interno una serie di file con anche le cartelle ccs e js... quale devo mandare su ftp?

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... finish dovrebbe essere quello nero, prova con i contenuti di questo, cartelle CSS e IS ...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor
 ‪ KolAsim ‪ ‪
... finish dovrebbe essere quello nero, prova con i contenuti di questo, cartelle CSS e IS ... .

Kalos... non ho capito.....

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

css3-preloader-transition-finish

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

E' giusto quello che ho fatto?  le cartelle CSS e JS da quale di queste cartelle devo prenderla,"css3-preloader-transition-finish" e "css3-preloader-transition-star" non ho capito..?

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... le cartelle CSS e JS contenute nella cartella "css3-preloader-transition-finish",  come già detto prima, lo trasferisci nella radice del sito... ... e che sarebbero quella cui il codice che ho postato fa riferimento...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

fatto ... prova a vedere.. se ok?

Czytaj więcej
Posted on the from Marco S.
Marco S.
Marco S.
User
Autor

Kalos non mi apre la pagina dopo il caricamento...

e non devo vedere la parte del menu... aiuto grazie...

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT

... link ... link ... 

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

Guarda

non mi apre la pagina dopo il caricamento...

e non devo vedere la parte del menu... aiuto grazie...

Czytaj więcej
Posted on the from Marco S.
 stesil  
 stesil  
User

Un errore è in questo codice inserito prima della chiusura del tag body:

$(function() {  $('#body').addClass('loaded');});

devi togliere il cancelletto davanti a body.

Per il menu che resta visibile devi aumentare a 10001 il valore di z-index del div #loader-wrapper (file main.css)

Czytaj więcej
Posted on the from  stesil  
Marco S.
Marco S.
User
Autor

ed invece per far diventare sfondo bianco?

Czytaj więcej
Posted on the from Marco S.
Jamie B.
Jamie B.
User

hi

there's a few bits of code that needs removing from the preloader tutorial from ihatetomatoes tutorial, other wise it won't work properly in website x5

regards

jamie

Czytaj więcej
Posted on the from Jamie B.
Marco S.
Marco S.
User
Autor
 stesil  
Un errore è in questo codice inserito prima della chiusura del tag body: $(function() {  $('#body').addClass('loaded');}); devi togliere il cancelletto davanti a body. Per il menu che resta visibile devi aumentare a 10001 il valore di z-index del div #loader-wrapper (file main.css)

Perfetto tutto funzionante... per avere sfondo bianco? come mai anche quando preloader finisce mi rimane slider non ancora caricato del tutto sulla mia pagina http://www.mediacar.biz/index.html

Czytaj więcej
Posted on the from Marco S.
 stesil  
 stesil  
User

Per lo sfondo devi modificare il valore esadecimale (da #22222 a #fff) assegnato al background di #loader-wrapper .loader-section (sempre nel file main.css).

Perché la pagina risulti visibile quando tutti i suoi contenuti sono stati caricati devi modificare il codice inserito prima della chiusura del tag body

$(window).on('load', function() {

  $('body').addClass('loaded');

});

Czytaj więcej
Posted on the from  stesil  
Marco S.
Marco S.
User
Autor

quindi tolgo  questo $(function() {  $('body').addClass('loaded');}); ed inserisco questo

$(window).on('load', function() {

  $('body').addClass('loaded');

});

giusto?

Czytaj więcej
Posted on the from Marco S.
 stesil  
 stesil  
User

Czytaj więcej
Posted on the from  stesil  
Marco S.
Marco S.
User
Autor

Come mai non carica?

Czytaj więcej
Posted on the from Marco S.
 stesil  
 stesil  
User

Perché hai tolto i tag <script>   </script> che racchiudevano il codice che hai modificato.

Czytaj więcej
Posted on the from  stesil  
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT
Marco S.
Come mai non carica?

... ho visto adesso la tua pagina, e mi sembra in ordine, grazie anche ai suggerimenti di stesil, per il #body appunto, era un errore della pagina  del sorgente... ...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

tutto perfetto... Grazie ragazzi... grazie Stesil... Grazie Kalos... come posso fare per mettere piccola guida...

Czytaj więcej
Posted on the from Marco S.
 ‪ KolAsim ‪ ‪
 ‪ KolAsim ‪ ‪
Moderator
Najlepszy Użytkownik miesiąca PT
Marco S.
... ... ... come posso fare per mettere piccola guida...

... come hai visto è semplice, e puoi adottare lo stesso metodo, come detto all'inizio, anche con gli altri preloader...

... quindi se vuoi, e potrebbe tornar utile ad altri, ...apri un NUOVO argomento e posta il tuo tutorial, come quello che Giancarlo postò in IDEA

... a tal proposito, per l'intestazione in cui stai usando il mio codice con wowslider, le immagini sono inadatte, ed improponibili per i dispositivi "mobile"; dovresti ridurle di peso almeno non superiore ai 200 KB cu...

...

.

Czytaj więcej
Posted on the from  ‪ KolAsim ‪ ‪
Marco S.
Marco S.
User
Autor

ok...

Czytaj więcej
Posted on the from Marco S.