{"id":275,"date":"2010-01-11T22:34:14","date_gmt":"2010-01-11T21:34:14","guid":{"rendered":"http:\/\/www.donatantonio.net\/blog\/?p=275"},"modified":"2010-01-11T22:37:26","modified_gmt":"2010-01-11T21:37:26","slug":"attesa-caricamento-pagina-in-javascript","status":"publish","type":"post","link":"https:\/\/www.donatantonio.net\/blog\/guide_tutorial\/javascript\/attesa-caricamento-pagina-in-javascript\/","title":{"rendered":"Attesa caricamento pagina in Javascript"},"content":{"rendered":"<p>Durante il caricamento di una pagina web pu\u00f2 spesso risultare comodo e stilisticamente elegante presentare al visitatore un&#8217;animazione di attesa.<br \/>\nIn genere tale animazione si concretizza con una classica rotellina ruotante seguita dal testo &#8220;Loading&#8230;&#8221;. Lo script proposto si compone di poche righe javascript, precedute da codice CSS per gestirne lo stile. Verr\u00e0 visualizzato a monitor un box con sfondo grigio con una piccola animazione; tale box scomparir\u00e0 quando la pagina sar\u00e0 completamente caricata.<\/p>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Loading&#8230;&lt;\/title&gt;<br \/>\n&lt;style type=&quot;text\/css&quot;&gt;<br \/>\n#loading {<br \/>\n\twidth: 280px;<br \/>\n\theight: 280px;<br \/>\n\tbackground-color: #c0c0c0;<br \/>\n\tposition: absolute;<br \/>\n\tleft: 50%;<br \/>\n\ttop: 50%;<br \/>\n\tmargin-top: -140px;<br \/>\n\tmargin-left: -140px;<br \/>\n\ttext-align: center;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/p>\n<p>&lt;script type=&quot;text\/javascript&quot;&gt;<br \/>\ndocument.write(&#8216;&lt;div id=&quot;loading&quot; align=&quot;center&quot;&gt;&lt;img src=&quot;http:\/\/www.donatantonio.net\/\/immagini\/mini_loading.gif&quot; alt=&quot;Caricamento&quot; \/&gt;&lt;br&gt;&lt;br&gt;Attendi la pagina richiesta&#8230;&lt;\/div&gt;&#8217;);<br \/>\nwindow.onload=function(){<br \/>\n\tdocument.getElementById(&quot;loading&quot;).style.display=&quot;none&quot;;<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;!&#8211; Il contenuto della pagina&#8230; &#8211;&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<p>Di seguito viene fornita l&#8217;immagine in formato gif utitlizzata nello script.<\/p>\n<p><img src='http:\/\/www.donatantonio.net\/\/immagini\/mini_loading.gif' alt='Loading' \/><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Durante il caricamento di una pagina web pu\u00f2 spesso risultare comodo e stilisticamente elegante presentare al visitatore un&#8217;animazione di attesa.<br \/>\nIn genere tale animazione si concretizza con una classica rotellina ruotante seguita dal testo &#8220;Loading&#8230;&#8221;. Lo script proposto si compone di poche righe javascript, precedute da codice CSS per gestirne lo stile. Verr\u00e0 visualizzato a monitor un box con sfondo grigio con una piccola animazione; tale box scomparir\u00e0 quando la pagina sar\u00e0 completamente caricata.<\/p>\n<p>&lt;html&gt;<br \/>\n&lt;head&gt;<br \/>\n&lt;title&gt;Loading&#8230;&lt;\/title&gt;<br \/>\n&lt;style type=&quot;text\/css&quot;&gt;<br \/>\n#loading {<br \/>\n\twidth: 280px;<br \/>\n\theight: 280px;<br \/>\n\tbackground-color: #c0c0c0;<br \/>\n\tposition: absolute;<br \/>\n\tleft: 50%;<br \/>\n\ttop: 50%;<br \/>\n\tmargin-top: -140px;<br \/>\n\tmargin-left: -140px;<br \/>\n\ttext-align: center;<br \/>\n}<br \/>\n&lt;\/style&gt;<\/p>\n<p>&lt;script type=&quot;text\/javascript&quot;&gt;<br \/>\ndocument.write(&#8216;&lt;div id=&quot;loading&quot; align=&quot;center&quot;&gt;&lt;img src=&quot;http:\/\/www.donatantonio.net\/\/immagini\/mini_loading.gif&quot; alt=&quot;Caricamento&quot; \/&gt;&lt;br&gt;&lt;br&gt;Attendi la pagina richiesta&#8230;&lt;\/div&gt;&#8217;);<br \/>\nwindow.onload=function(){<br \/>\n\tdocument.getElementById(&quot;loading&quot;).style.display=&quot;none&quot;;<br \/>\n}<br \/>\n&lt;\/script&gt;<br \/>\n&lt;\/head&gt;<br \/>\n&lt;body&gt;<br \/>\n&lt;!&#8211; Il contenuto della pagina&#8230; &#8211;&gt;<br \/>\n&lt;\/body&gt;<br \/>\n&lt;\/html&gt;<\/p>\n<p>Di seguito viene fornita l&#8217;immagine in formato gif utitlizzata nello script.<\/p><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[56,55,54],"_links":{"self":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/275"}],"collection":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/comments?post=275"}],"version-history":[{"count":0,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/posts\/275\/revisions"}],"wp:attachment":[{"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/media?parent=275"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/categories?post=275"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.donatantonio.net\/blog\/wp-json\/wp\/v2\/tags?post=275"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}