Re: [css-d] FOUC on homepage
Please see below: On 3/20/15 12:34 PM, Chad Lundgren wrote: Hi, FOUC is as good a name as any. The problem is that your slides need to be set to display: none in your CSS. This issue is happening because the JavaScript must load and be parsed before it can set the display to none. This takes just long enough for this flash. CSS, on the other hand, must all be downloaded and parsed before the page will render, pretty much for this exact reason. The JavaScript, which is effectively using inline style tags, will have no problem overriding the display: none. Thanks, Chad On Fri, Mar 20, 2015 at 12:09 PM, J.C. Berry wrote: I was reading and realized that may not be the correct terminology... no wonder the comments about an older problem. When I said flash of unstyled content, in my particular case I meant that the homepage banners on these pages http://www.xifin.com http://www.xifin.com/radiology and the video carousels on these as well http://xifin.com/resources/success-stories http://xifin.com/resources/success-stories/Renaissance-RX all show the images before they are laid out correctly. If the page loads slower, it takes longer for the positions to be set correctly and for the animations to start. What do you call this? On Fri, Mar 20, 2015 at 10:36 AM, J.C. Berry wrote: Hello all, can you shed any light on how to fix a FOUC on our homepages? http://www.xifin.com http://www.xifin.com/radiology (maybe not bad?) Thanks in advance! Yes. This is a JavaScript problem. Basically, you need to check that each image is loaded before displaying it. If you have problems with the layout prior to the images loading, do come back for CSS help. -- Cordially, David __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
You have some very good sized images and a boatload of JS -- they take time to load. One idea would be to look into whatever carousel you are using and see if they offer a "lazy loading" option. Where it will pull in the image only on demand, and not preload them at all beforehand. Can make the page start faster and you'll not get the "flash" because only the first image will be pre-loaded. Also, many (most/all?) carousels handle image placement themselves, you could (should?) either "display: none" them or have them off screen initially, and let the carousel move them into place. They would preload, but not visibly. Another idea is to play with the load order of things. You are being a good soldier and loading all your JS code at the bottom, but that means everything has to be loaded before the JS carousel kicks in. Maybe you could load the carousel and it's dependents up top (or in line, right after the images?), then save the interaction pieces to the bottom. That way, the carousel will kick off sooner? Chris On 3/20/15, 11:09 AM, "J.C. Berry" wrote: >I was reading and realized that may not be the correct terminology... no >wonder the comments about an older problem. When I said flash of unstyled >content, in my particular case I meant that the homepage banners on these >pages >http://www.xifin.com >http://www.xifin.com/radiology > >and the video carousels on these as well >http://xifin.com/resources/success-stories >http://xifin.com/resources/success-stories/Renaissance-RX > >all show the images before they are laid out correctly. If the page loads >slower, it takes longer for the positions to be set correctly and for the >animations to start. > >What do you call this? > > > >On Fri, Mar 20, 2015 at 10:36 AM, J.C. Berry >wrote: > >> Hello all, can you shed any light on how to fix a FOUC on our homepages? >> http://www.xifin.com >> http://www.xifin.com/radiology (maybe not bad?) >> >> Thanks in advance! >> -- >> J.C. Berry, M.A. >> UI Developer >> 619.306.1712(m) >> jcharlesbe...@gmail.com >> http://www.mindarc.com >> >> >>- >>--- >> >> This E-mail is covered by the Electronic Communications Privacy Act, 18 >> U.S.C. ?? 2510-2521 and is legally privileged. This information is >> confidential information and is intended only for the use of the >>individual >> or entity named above. If the reader of this message is not the intended >> recipient, you are hereby notified that any dissemination, distribution >>or >> copying of this communication is strictly prohibited. >> >> >>- >>--- >> > > > >-- >J.C. Berry, M.A. >UI Developer >619.306.1712(m) >jcharlesbe...@gmail.com >http://www.mindarc.com >-- >-- > >This E-mail is covered by the Electronic Communications Privacy Act, 18 >U.S.C. ?? 2510-2521 and is legally privileged. This information is >confidential information and is intended only for the use of the >individual >or entity named above. If the reader of this message is not the intended >recipient, you are hereby notified that any dissemination, distribution or >copying of this communication is strictly prohibited. >-- >-- >__ >css-discuss [css-d@lists.css-discuss.org] >http://www.css-discuss.org/mailman/listinfo/css-d >List wiki/FAQ -- http://css-discuss.incutio.com/ >List policies -- http://css-discuss.org/policies.html >Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
On Fri, Mar 20, 2015 at 3:33 PM Tom Livingston wrote: > On Fri, Mar 20, 2015 at 2:09 PM J.C. Berry > wrote: > >> I was reading and realized that may not be the correct terminology... no >> wonder the comments about an older problem. When I said flash of unstyled >> content, in my particular case I meant that the homepage banners on these >> pages >> http://www.xifin.com >> http://www.xifin.com/radiology >> >> and the video carousels on these as well >> http://xifin.com/resources/success-stories >> http://xifin.com/resources/success-stories/Renaissance-RX >> >> all show the images before they are laid out correctly. If the page loads >> slower, it takes longer for the positions to be set correctly and for the >> animations to start. >> >> What do you call this? >> >> > Something else to try would be defining the dimensions of the containers - if possible - which may at least hold the space for the images and minimize adjacent elements from moving around. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
Hi, FOUC is as good a name as any. The problem is that your slides need to be set to display: none in your CSS. This issue is happening because the JavaScript must load and be parsed before it can set the display to none. This takes just long enough for this flash. CSS, on the other hand, must all be downloaded and parsed before the page will render, pretty much for this exact reason. The JavaScript, which is effectively using inline style tags, will have no problem overriding the display: none. Thanks, Chad On Fri, Mar 20, 2015 at 12:09 PM, J.C. Berry wrote: > I was reading and realized that may not be the correct terminology... no > wonder the comments about an older problem. When I said flash of unstyled > content, in my particular case I meant that the homepage banners on these > pages > http://www.xifin.com > http://www.xifin.com/radiology > > and the video carousels on these as well > http://xifin.com/resources/success-stories > http://xifin.com/resources/success-stories/Renaissance-RX > > all show the images before they are laid out correctly. If the page loads > slower, it takes longer for the positions to be set correctly and for the > animations to start. > > What do you call this? > > > > On Fri, Mar 20, 2015 at 10:36 AM, J.C. Berry > wrote: > > > Hello all, can you shed any light on how to fix a FOUC on our homepages? > > http://www.xifin.com > > http://www.xifin.com/radiology (maybe not bad?) > > > > Thanks in advance! > > -- > > J.C. Berry, M.A. > > UI Developer > > 619.306.1712(m) > > jcharlesbe...@gmail.com > > http://www.mindarc.com > > > > > > > > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > > U.S.C. ?? 2510-2521 and is legally privileged. This information is > > confidential information and is intended only for the use of the > individual > > or entity named above. If the reader of this message is not the intended > > recipient, you are hereby notified that any dissemination, distribution > or > > copying of this communication is strictly prohibited. > > > > > > > > > > > -- > J.C. Berry, M.A. > UI Developer > 619.306.1712(m) > jcharlesbe...@gmail.com > http://www.mindarc.com > > > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > U.S.C. ?? 2510-2521 and is legally privileged. This information is > confidential information and is intended only for the use of the individual > or entity named above. If the reader of this message is not the intended > recipient, you are hereby notified that any dissemination, distribution or > copying of this communication is strictly prohibited. > > > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
On Fri, Mar 20, 2015 at 2:09 PM J.C. Berry wrote: > I was reading and realized that may not be the correct terminology... no > wonder the comments about an older problem. When I said flash of unstyled > content, in my particular case I meant that the homepage banners on these > pages > http://www.xifin.com > http://www.xifin.com/radiology > > and the video carousels on these as well > http://xifin.com/resources/success-stories > http://xifin.com/resources/success-stories/Renaissance-RX > > all show the images before they are laid out correctly. If the page loads > slower, it takes longer for the positions to be set correctly and for the > animations to start. > > What do you call this? > > In my humble opinion, I call it "page loading". In other words, I don't believe in doing anything about it. That aside, there may be image loading options for the sliders or there may be ways of hiding the sliders until ready. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
I was reading and realized that may not be the correct terminology... no wonder the comments about an older problem. When I said flash of unstyled content, in my particular case I meant that the homepage banners on these pages http://www.xifin.com http://www.xifin.com/radiology and the video carousels on these as well http://xifin.com/resources/success-stories http://xifin.com/resources/success-stories/Renaissance-RX all show the images before they are laid out correctly. If the page loads slower, it takes longer for the positions to be set correctly and for the animations to start. What do you call this? On Fri, Mar 20, 2015 at 10:36 AM, J.C. Berry wrote: > Hello all, can you shed any light on how to fix a FOUC on our homepages? > http://www.xifin.com > http://www.xifin.com/radiology (maybe not bad?) > > Thanks in advance! > -- > J.C. Berry, M.A. > UI Developer > 619.306.1712(m) > jcharlesbe...@gmail.com > http://www.mindarc.com > > > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > U.S.C. ?? 2510-2521 and is legally privileged. This information is > confidential information and is intended only for the use of the individual > or entity named above. If the reader of this message is not the intended > recipient, you are hereby notified that any dissemination, distribution or > copying of this communication is strictly prohibited. > > > -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
In trying to learn CSS I just came across this term a few months ago in Charles Wyke-Smith's "Stylin' With CSS." On page 241 (2nd ed) he says "you need a link to the style page in the head of the page to prevent this from happening." He says "if a link tag or a script tag (used to associate JavaScript with your page) is present in the head of the page, your page won't trigger a FOUC." He says to check with http://bluerobot.com/web/css/fouc.asp. On Fri, Mar 20, 2015 at 1:50 PM, Ryan Reese wrote: > Sorry, you did a double negative. I misunderstood. > > AFAIK this problem no longer exists but there are still articles on this > which give solutions. I suggest you google some. > > On Fri, Mar 20, 2015 at 1:46 PM, J.C. Berry > wrote: > > > I was not aware Reese that this problem no longer exists in web dev...? > > > > I have read on various fixes, but I think this is peculiar to my specific > > case. > > > > On Fri, Mar 20, 2015 at 10:40 AM, Ryan Reese > > > wrote: > > > >> Flash Of Unstyled Content. Man I haven't heard about that in years. > >> > >> Have you tried Googling for solutions? I'm bombarded by hundreds of > links > >> all describing methods that can help. > >> > >> On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor > >> wrote: > >> > >>> I would be more inclined to try to help if you glossed "FOUC" rather > >>> than requiring me (and perhaps others) to research it for myself > >>> (theirselves). > >>> > >>> Philip Taylor > >>> > >>> J.C. Berry wrote: > >>> > >>> Hello all, can you shed any light on how to fix a FOUC on our > homepages? > http://www.xifin.com > http://www.xifin.com/radiology (maybe not bad?) > > Thanks in advance! > > > __ > >>> css-discuss [css-d@lists.css-discuss.org] > >>> http://www.css-discuss.org/mailman/listinfo/css-d > >>> List wiki/FAQ -- http://css-discuss.incutio.com/ > >>> List policies -- http://css-discuss.org/policies.html > >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > >>> > >> > >> > >> > >> -- > >> Ryan Reese > >> > > > > > > > > -- > > J.C. Berry, M.A. > > UI Developer > > 619.306.1712(m) > > jcharlesbe...@gmail.com > > http://www.mindarc.com > > > > > > > > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > > U.S.C. ?? 2510-2521 and is legally privileged. This information is > > confidential information and is intended only for the use of the > individual > > or entity named above. If the reader of this message is not the intended > > recipient, you are hereby notified that any dissemination, distribution > or > > copying of this communication is strictly prohibited. > > > > > > > > > > > -- > Ryan Reese > __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
Sorry, you did a double negative. I misunderstood. AFAIK this problem no longer exists but there are still articles on this which give solutions. I suggest you google some. On Fri, Mar 20, 2015 at 1:46 PM, J.C. Berry wrote: > I was not aware Reese that this problem no longer exists in web dev...? > > I have read on various fixes, but I think this is peculiar to my specific > case. > > On Fri, Mar 20, 2015 at 10:40 AM, Ryan Reese > wrote: > >> Flash Of Unstyled Content. Man I haven't heard about that in years. >> >> Have you tried Googling for solutions? I'm bombarded by hundreds of links >> all describing methods that can help. >> >> On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor >> wrote: >> >>> I would be more inclined to try to help if you glossed "FOUC" rather >>> than requiring me (and perhaps others) to research it for myself >>> (theirselves). >>> >>> Philip Taylor >>> >>> J.C. Berry wrote: >>> >>> Hello all, can you shed any light on how to fix a FOUC on our homepages? http://www.xifin.com http://www.xifin.com/radiology (maybe not bad?) Thanks in advance! __ >>> css-discuss [css-d@lists.css-discuss.org] >>> http://www.css-discuss.org/mailman/listinfo/css-d >>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>> List policies -- http://css-discuss.org/policies.html >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >>> >> >> >> >> -- >> Ryan Reese >> > > > > -- > J.C. Berry, M.A. > UI Developer > 619.306.1712(m) > jcharlesbe...@gmail.com > http://www.mindarc.com > > > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > U.S.C. ?? 2510-2521 and is legally privileged. This information is > confidential information and is intended only for the use of the individual > or entity named above. If the reader of this message is not the intended > recipient, you are hereby notified that any dissemination, distribution or > copying of this communication is strictly prohibited. > > > -- Ryan Reese __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
I was not aware either. I had to remember what FOUC was since I hadn't heard of that term in years. I was sure that this issue is not around today. Granted, I couldn't get the issue to appear on my end. On Fri, Mar 20, 2015 at 1:46 PM, J.C. Berry wrote: > I was not aware Reese that this problem no longer exists in web dev...? > > I have read on various fixes, but I think this is peculiar to my specific > case. > > On Fri, Mar 20, 2015 at 10:40 AM, Ryan Reese > wrote: > >> Flash Of Unstyled Content. Man I haven't heard about that in years. >> >> Have you tried Googling for solutions? I'm bombarded by hundreds of links >> all describing methods that can help. >> >> On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor >> wrote: >> >>> I would be more inclined to try to help if you glossed "FOUC" rather >>> than requiring me (and perhaps others) to research it for myself >>> (theirselves). >>> >>> Philip Taylor >>> >>> J.C. Berry wrote: >>> >>> Hello all, can you shed any light on how to fix a FOUC on our homepages? http://www.xifin.com http://www.xifin.com/radiology (maybe not bad?) Thanks in advance! __ >>> css-discuss [css-d@lists.css-discuss.org] >>> http://www.css-discuss.org/mailman/listinfo/css-d >>> List wiki/FAQ -- http://css-discuss.incutio.com/ >>> List policies -- http://css-discuss.org/policies.html >>> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >>> >> >> >> >> -- >> Ryan Reese >> > > > > -- > J.C. Berry, M.A. > UI Developer > 619.306.1712(m) > jcharlesbe...@gmail.com > http://www.mindarc.com > > > > This E-mail is covered by the Electronic Communications Privacy Act, 18 > U.S.C. ?? 2510-2521 and is legally privileged. This information is > confidential information and is intended only for the use of the individual > or entity named above. If the reader of this message is not the intended > recipient, you are hereby notified that any dissemination, distribution or > copying of this communication is strictly prohibited. > > > -- Ryan Reese __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
I was not aware Reese that this problem no longer exists in web dev...? I have read on various fixes, but I think this is peculiar to my specific case. On Fri, Mar 20, 2015 at 10:40 AM, Ryan Reese wrote: > Flash Of Unstyled Content. Man I haven't heard about that in years. > > Have you tried Googling for solutions? I'm bombarded by hundreds of links > all describing methods that can help. > > On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor > wrote: > >> I would be more inclined to try to help if you glossed "FOUC" rather than >> requiring me (and perhaps others) to research it for myself (theirselves). >> >> Philip Taylor >> >> J.C. Berry wrote: >> >> Hello all, can you shed any light on how to fix a FOUC on our homepages? >>> http://www.xifin.com >>> http://www.xifin.com/radiology (maybe not bad?) >>> >>> Thanks in advance! >>> >>> __ >> css-discuss [css-d@lists.css-discuss.org] >> http://www.css-discuss.org/mailman/listinfo/css-d >> List wiki/FAQ -- http://css-discuss.incutio.com/ >> List policies -- http://css-discuss.org/policies.html >> Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ >> > > > > -- > Ryan Reese > -- J.C. Berry, M.A. UI Developer 619.306.1712(m) jcharlesbe...@gmail.com http://www.mindarc.com This E-mail is covered by the Electronic Communications Privacy Act, 18 U.S.C. ?? 2510-2521 and is legally privileged. This information is confidential information and is intended only for the use of the individual or entity named above. If the reader of this message is not the intended recipient, you are hereby notified that any dissemination, distribution or copying of this communication is strictly prohibited. __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
Flash Of Unstyled Content. Man I haven't heard about that in years. Have you tried Googling for solutions? I'm bombarded by hundreds of links all describing methods that can help. On Fri, Mar 20, 2015 at 1:38 PM, Philip Taylor wrote: > I would be more inclined to try to help if you glossed "FOUC" rather than > requiring me (and perhaps others) to research it for myself (theirselves). > > Philip Taylor > > J.C. Berry wrote: > > Hello all, can you shed any light on how to fix a FOUC on our homepages? >> http://www.xifin.com >> http://www.xifin.com/radiology (maybe not bad?) >> >> Thanks in advance! >> >> __ > css-discuss [css-d@lists.css-discuss.org] > http://www.css-discuss.org/mailman/listinfo/css-d > List wiki/FAQ -- http://css-discuss.incutio.com/ > List policies -- http://css-discuss.org/policies.html > Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ > -- Ryan Reese __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] FOUC on homepage
I would be more inclined to try to help if you glossed "FOUC" rather than requiring me (and perhaps others) to research it for myself (theirselves). Philip Taylor J.C. Berry wrote: Hello all, can you shed any light on how to fix a FOUC on our homepages? http://www.xifin.com http://www.xifin.com/radiology (maybe not bad?) Thanks in advance! __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
