[{"data":1,"prerenderedAt":277},["ShallowReactive",2],{"i-lucide:menu":3,"i-lucide:arrow-up-right":8,"i-lucide:moon":10,"i-lucide:sun":12,"i-lucide:rss":14,"i-simple-icons:github":16,"i-simple-icons:linkedin":18,"post-\u002F2011\u002Fmaking-the-web-experience-smoother-with-loading-fades":21,"surround-\u002F2011\u002Fmaking-the-web-experience-smoother-with-loading-fades":264,"i-lucide:arrow-left":273,"i-lucide:arrow-right":275},{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":7},0,24,false,"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M4 5h16M4 12h16M4 19h16\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":9},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M7 7h10v10M7 17L17 7\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":11},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M20.985 12.486a9 9 0 1 1-9.473-9.472c.405-.022.617.46.402.803a6 6 0 0 0 8.268 8.268c.344-.215.825-.004.803.401\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":13},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Ccircle cx=\"12\" cy=\"12\" r=\"4\"\u002F>\u003Cpath d=\"M12 2v2m0 16v2M4.93 4.93l1.41 1.41m11.32 11.32l1.41 1.41M2 12h2m16 0h2M6.34 17.66l-1.41 1.41M19.07 4.93l-1.41 1.41\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":15},"\u003Cg fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\">\u003Cpath d=\"M4 11a9 9 0 0 1 9 9M4 4a16 16 0 0 1 16 16\"\u002F>\u003Ccircle cx=\"5\" cy=\"19\" r=\"1\"\u002F>\u003C\u002Fg>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":17},"\u003Cpath fill=\"currentColor\" d=\"M12 .297c-6.63 0-12 5.373-12 12c0 5.303 3.438 9.8 8.205 11.385c.6.113.82-.258.82-.577c0-.285-.01-1.04-.015-2.04c-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729c1.205.084 1.838 1.236 1.838 1.236c1.07 1.835 2.809 1.305 3.495.998c.108-.776.417-1.305.76-1.605c-2.665-.3-5.466-1.332-5.466-5.93c0-1.31.465-2.38 1.235-3.22c-.135-.303-.54-1.523.105-3.176c0 0 1.005-.322 3.3 1.23c.96-.267 1.98-.399 3-.405c1.02.006 2.04.138 3 .405c2.28-1.552 3.285-1.23 3.285-1.23c.645 1.653.24 2.873.12 3.176c.765.84 1.23 1.91 1.23 3.22c0 4.61-2.805 5.625-5.475 5.92c.42.36.81 1.096.81 2.22c0 1.606-.015 2.896-.015 3.286c0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":19,"hidden":20},"\u003Cpath fill=\"currentColor\" d=\"M20.447 20.452h-3.554v-5.569c0-1.328-.027-3.037-1.852-3.037c-1.853 0-2.136 1.445-2.136 2.939v5.667H9.351V9h3.414v1.561h.046c.477-.9 1.637-1.85 3.37-1.85c3.601 0 4.267 2.37 4.267 5.455v6.286zM5.337 7.433a2.06 2.06 0 0 1-2.063-2.065a2.064 2.064 0 1 1 2.063 2.065m1.782 13.019H3.555V9h3.564zM22.225 0H1.771C.792 0 0 .774 0 1.729v20.542C0 23.227.792 24 1.771 24h20.451C23.2 24 24 23.227 24 22.271V1.729C24 .774 23.2 0 22.222 0z\"\u002F>",true,{"id":22,"title":23,"body":24,"category":245,"comments":246,"date":247,"description":30,"excerpt":246,"extension":248,"image":246,"meta":249,"navigation":20,"path":250,"readingTime":251,"seo":252,"stem":253,"subtitle":246,"tags":254,"wordCount":262,"__hash__":263},"posts\u002F2011\u002Fmaking-the-web-experience-smoother-with-loading-fades.md","Making the web experience smoother with loading fades",{"type":25,"value":26,"toc":243},"minimark",[27,31,34,37,73,76,236,239],[28,29,30],"p",{},"CSS3 transitions and jQuery animations have greatly affected the web experience. Following up on the idea, here's a quick snippet to make the webpage smoothly fade in\u002Fout on page loads.",[28,32,33],{},"When you click on a link, the page fades out, leaving only white behind, when the loading of the new page is complete, the page fades in again. A couple of things to note though: the trick will only be useful with really small pages, since loading large pictures leaves the user wondering what the hell happened since (s)he can't see any action. One of the principles of browser design is to show the content as soon as it's available, hence the page 'jumping' one sometimes sees with a slower connection. That said, only use it on cacheable, static and small pages.",[28,35,36],{},"First, hide the body of the page with CSS:",[38,39,44],"pre",{"className":40,"code":41,"language":42,"meta":43,"style":43},"language-css shiki shiki-themes github-light github-dark","body { display: hidden; }\n","css","",[45,46,47],"code",{"__ignoreMap":43},[48,49,52,56,60,64,67,70],"span",{"class":50,"line":51},"line",1,[48,53,55],{"class":54},"s9eBZ","body",[48,57,59],{"class":58},"sVt8B"," { ",[48,61,63],{"class":62},"sj4cs","display",[48,65,66],{"class":58},": ",[48,68,69],{"class":62},"hidden",[48,71,72],{"class":58},"; }\n",[28,74,75],{},"...and add the following JavaScript to hide\u002Fshow the page. Don't forget to include jQuery first!",[38,77,81],{"className":78,"code":79,"language":80,"meta":43,"style":43},"language-js shiki shiki-themes github-light github-dark","$(document).ready(function(){\n    $('body').fadeIn('slow');\n});\n\n$(document).unload(function(){\n   $('body').fadeOut('fast');\n});\n","js",[45,82,83,105,157,163,169,185,231],{"__ignoreMap":43},[48,84,85,89,92,95,98,102],{"class":50,"line":51},[48,86,88],{"class":87},"sScJk","$",[48,90,91],{"class":58},"(document).",[48,93,94],{"class":87},"ready",[48,96,97],{"class":58},"(",[48,99,101],{"class":100},"szBVR","function",[48,103,104],{"class":58},"(){\n",[48,106,108,111,113,116,119,122,125,127,129,131,134,137,139,141,143,145,148,150,152,154],{"class":50,"line":107},2,[48,109,110],{"class":87},"    $",[48,112,97],{"class":58},[48,114,115],{"class":100},"&",[48,117,118],{"class":58},"#",[48,120,121],{"class":62},"039",[48,123,124],{"class":58},";body",[48,126,115],{"class":100},[48,128,118],{"class":58},[48,130,121],{"class":62},[48,132,133],{"class":58},";).",[48,135,136],{"class":87},"fadeIn",[48,138,97],{"class":58},[48,140,115],{"class":100},[48,142,118],{"class":58},[48,144,121],{"class":62},[48,146,147],{"class":58},";slow",[48,149,115],{"class":100},[48,151,118],{"class":58},[48,153,121],{"class":62},[48,155,156],{"class":58},";);\n",[48,158,160],{"class":50,"line":159},3,[48,161,162],{"class":58},"});\n",[48,164,166],{"class":50,"line":165},4,[48,167,168],{"emptyLinePlaceholder":20},"\n",[48,170,172,174,176,179,181,183],{"class":50,"line":171},5,[48,173,88],{"class":87},[48,175,91],{"class":58},[48,177,178],{"class":87},"unload",[48,180,97],{"class":58},[48,182,101],{"class":100},[48,184,104],{"class":58},[48,186,188,191,193,195,197,199,201,203,205,207,209,212,214,216,218,220,223,225,227,229],{"class":50,"line":187},6,[48,189,190],{"class":87},"   $",[48,192,97],{"class":58},[48,194,115],{"class":100},[48,196,118],{"class":58},[48,198,121],{"class":62},[48,200,124],{"class":58},[48,202,115],{"class":100},[48,204,118],{"class":58},[48,206,121],{"class":62},[48,208,133],{"class":58},[48,210,211],{"class":87},"fadeOut",[48,213,97],{"class":58},[48,215,115],{"class":100},[48,217,118],{"class":58},[48,219,121],{"class":62},[48,221,222],{"class":58},";fast",[48,224,115],{"class":100},[48,226,118],{"class":58},[48,228,121],{"class":62},[48,230,156],{"class":58},[48,232,234],{"class":50,"line":233},7,[48,235,162],{"class":58},[28,237,238],{},"Update: After using the technique for a while, I noticed several problems with it. Firstly, what happens when the user doesn't have JS enabled? The page stays white. JS crashes due to syntax errors also cause failure with fadeIn. Secondly, if the page is large enough, the user might simply leave. A Loading... spinner would fix that.",[240,241,242],"style",{},"html pre.shiki code .s9eBZ, html code.shiki .s9eBZ{--shiki-default:#22863A;--shiki-dark:#85E89D}html pre.shiki code .sVt8B, html code.shiki .sVt8B{--shiki-default:#24292E;--shiki-dark:#E1E4E8}html pre.shiki code .sj4cs, html code.shiki .sj4cs{--shiki-default:#005CC5;--shiki-dark:#79B8FF}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html.dark .shiki span {color: var(--shiki-dark);background: var(--shiki-dark-bg);font-style: var(--shiki-dark-font-style);font-weight: var(--shiki-dark-font-weight);text-decoration: var(--shiki-dark-text-decoration);}html pre.shiki code .sScJk, html code.shiki .sScJk{--shiki-default:#6F42C1;--shiki-dark:#B392F0}html pre.shiki code .szBVR, html code.shiki .szBVR{--shiki-default:#D73A49;--shiki-dark:#F97583}",{"title":43,"searchDepth":107,"depth":107,"links":244},[],"Software Development",null,"2011-06-15","md",{},"\u002F2011\u002Fmaking-the-web-experience-smoother-with-loading-fades","about 1 minute",{"title":23,"description":30},"2011\u002Fmaking-the-web-experience-smoother-with-loading-fades",[255,42,256,257,258,259,260,261],"GUI","javascript","HTML element","JQuery","Style Sheets","UX","Web page",228,"f_m-a0_uQ62J6yyttsOlmLvkK-LRFtKs1VQf0l6KD4A",[265,269],{"title":266,"path":267,"stem":268,"children":-1},"Impro - Jaa!","\u002F2011\u002Fimpro-jaa","2011\u002Fimpro-jaa",{"title":270,"path":271,"stem":272,"children":-1},"[Fiction] Prey","\u002F2011\u002Fprey","2011\u002Fprey",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":274},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"m12 19l-7-7l7-7m7 7H5\"\u002F>",{"left":4,"top":4,"width":5,"height":5,"rotate":4,"vFlip":6,"hFlip":6,"body":276},"\u003Cpath fill=\"none\" stroke=\"currentColor\" stroke-linecap=\"round\" stroke-linejoin=\"round\" stroke-width=\"2\" d=\"M5 12h14m-7-7l7 7l-7 7\"\u002F>",1790886934304]