Go to main content

Textpattern CMS support forum

You are not logged in. Register | Login | Help

#1 2009-01-16 04:46:06

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

jQuery and CSS Loading Order Problem in Safari

I am putting the finishing touches to an images gallery site for a friend and encountering an intermittent problem with the javascript (jQuery) finishing loading before the CSS causing the “Kwicks” panels on the home page to hang up and make a mess. It only happens on Safari (Mac and PC) and on the first visit after firing the browser up. Reloading the page clears the problem.

The graphic below shows the problem reasonably well. The file default.css is still loading after the three JS files have finished. You can see that I have trimmed the CSS down to 10KB and the JS to 61KB. There is some scope for trimming the CSS some more but not much. I use the plugin txp:rvm_css so that the CSS can be read directly and place all the JS below the CSS as a standard operating procedure. I have tried putting the JS files between the </body> and </html> closing tags but it didn’t prevent the same problem occurring.

I have a reasonably fast Internet connection (8Mbps) and that may have something to do with it.

Grateful for any suggestions on how to ensure that the JS doesn’t finish first despite being 6 times larger than the CSS and placed after it on the page?

Offline

#2 2009-01-16 06:24:00

wet
Developer Emeritus
From: Schoerfling, Austria
Registered: 2005-06-06
Posts: 3,323
Website Mastodon

Re: jQuery and CSS Loading Order Problem in Safari

Without looking into your code: Are you hooking into $(document).ready, or starting your JS code right away?

Offline

#3 2009-01-16 14:03:28

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: jQuery and CSS Loading Order Problem in Safari

wet wrote:

Are you hooking into $(document).ready, or starting your JS code right away?

I have:

<script type="text/javascript"> $().ready(function() { $('.kwicks').kwicks({

…etc

I’m not great at the jQuery specifics, Robert. Would it make a difference to change that to:

<script type="text/javascript"> $(document).ready(function() { $('.kwicks').kwicks({ etc

Very many thanks.

Joe

Offline

#4 2009-01-16 19:28:25

wet
Developer Emeritus
From: Schoerfling, Austria
Registered: 2005-06-06
Posts: 3,323
Website Mastodon

Re: jQuery and CSS Loading Order Problem in Safari

joebaich wrote:

I’m not great at the jQuery specifics, Robert. Would it make a difference to change that to:

Unfortunately, no. Sorry, I’ve got nothing else to aid.

Offline

#5 2009-01-16 19:31:28

maniqui
Member
From: Buenos Aires, Argentina
Registered: 2004-10-10
Posts: 3,070
Website

Re: jQuery and CSS Loading Order Problem in Safari

Maybe this tip can help you:

Avoiding flickering in jquery


La música ideas portará y siempre continuará

TXP Builders – finely-crafted code, design and txp

Offline

#6 2009-01-16 19:38:35

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: jQuery and CSS Loading Order Problem in Safari

Thank you for the help Robert. I was reasonably sure that $().ready(function() and $(document).ready(function() were essentially the same but tried the other anyway. Not surprisingly, same intermittent result with Safari.

Offline

#7 2009-01-16 21:44:55

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: jQuery and CSS Loading Order Problem in Safari

maniqui wrote:

Maybe this tip can help you:

Avoiding flickering in jquery

Thanks for pointing me at that tip, Julián. I have added the snippet of code suggested and it hasn’t broken anything. It will take time to see if it truly makes a difference because of the intermittent nature of the problem. Update Sadly no, the problem is still there, but thanks again for the tip.

Joe

Last edited by joebaich (2009-01-16 22:24:22)

Offline

#8 2009-01-17 08:04:13

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: jQuery and CSS Loading Order Problem in Safari

Hi Joe, just checked your friend’s site on Safari 3.2.1/mac. Maybe it is your 8Mbps connection as with my 2Mbps all loaded just fine.


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#9 2009-01-17 16:11:40

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: jQuery and CSS Loading Order Problem in Safari

colak wrote:

Hi Joe, just checked your friend’s site on Safari 3.2.1/mac. Maybe it is your 8Mbps connection as with my 2Mbps all loaded just fine.

Thanks, Yiannis. I think that the higher connection speed may well have something to do with it. My wife is getting same OK result as you; she is elsewhere at present and on slower 1.5 Mbps connection. I can’t figure out why the smaller CSS files (compared to the JS) should take so long to load when the site is first invoked in Safari; that could be the key. The CSS validates fine, so it’s a puzzler.

His

Hers

Offline

#10 2009-01-18 07:53:02

colak
Admin
From: Cyprus
Registered: 2004-11-20
Posts: 9,007
Website GitHub Mastodon Twitter

Re: jQuery and CSS Loading Order Problem in Safari

i’m seeing the same menu as your wife… did you also check this problem with the dev of the jq plugin?

or did you experience it in any other site which is using the script?

Last edited by colak (2009-01-18 07:54:14)


Yiannis
——————————
NeMe | hblack.art | EMAP | A Sea change | Toolkit of Care
I do my best editing after I click on the submit button.

Offline

#11 2009-01-18 15:43:56

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: jQuery and CSS Loading Order Problem in Safari

Thanks for the additional suggestions, Yiannis.

I may have found a temporary, if ugly, fix for now. I replaced the min jquery core file 55KB with an uncompressed version 117KB, and this seems to give the 10KB of CSS time to load upstream. I hate myself for resorting to that but it has been a drain on my time. My feeling is that it is a Safari issue and that ultimately we will turn there for resolution. I think we want to find out why it takes comparatively little CSS so comparatively long to load. In the meantime, I will précis the information and send it to the kwiks for jquery dev for him to do with as he sees fit; he doesn’t have a forum, just comments on his blog.

Thanks to you and the others on the forum for the invaluable assistance.

Offline

#12 2009-02-03 15:20:12

joebaich
Member
From: DC Metro Area and elsewhere
Registered: 2006-09-24
Posts: 507
Website

Re: jQuery and CSS Loading Order Problem in Safari

Just an endnote to record the fact that we seem to have cured the problem. We upgraded from PHP 4 to PHP 5 for an unrelated reason, and Hey Presto! Don’t know why that should be, but the bad behaviour disappeared and the page loads correctly. We had returned to using the compressed jQuery files too.

Offline

Board footer

Powered by FluxBB