Bulletproof - changing the background

[Don Chambers]

Dachs... If you want help troubleshooting this, zip up your modified template and either provide me with a download link, or email it to me... I will then test it on a) my own xampp and b) a live sandbox.

[user1234]

Hi,

right now everything works, except that I still have no pre-loader for the template images. So, that's what I am most interested in, as obviously the normal methods won't work for s9y. And preloading has nothing whatsoever got to do with the other questions.

How do I use a preloader script with s9y? Obviously I can't simply bind in the images directly after the body tag, as that is already used to load functions.

Cheers,

Dachs

PS: once I delivered this blog I'll look more deeply into what is what and will provide you with CSS samples.

[garvinhicking]

Hi!

Why would you want to preload the images? Once your page has been loaded once, they'll all be cached. It's a lot of (manual) effort that'll be barely noticable.

Anyhow. If you wanted to do that, it's independent from s9y. You could use any kind of preloader, google for "jquery preload images" for example.

And now, what you you done so that your original problem is resolved? It might be important for other readers who look up this thread.

Regards,
Garvin

[Don Chambers]

Instead of preloading, you could also do your images as sprites - only a single image file is loaded. Good tutorial on css sprites at A List Apart.

A great example of sprites is the navbar at http://www.apple.com. All the navigation links are from the single image file http://images.apple.com/global/nav/imag ... lnavbg.png

[user1234]

Hi,

Why would you want to preload the images? Once your page has been loaded once, they'll all be cached. It's a lot of (manual) effort that'll be barely noticable.

That depends entirely on browser settings whether or not they'll be cached. This will be used by someone heavy on graphics in her posts. The basic design needs to be loaded first, regardless of browser settings and especially upon visiting the front page a first time.

Anyhow. If you wanted to do that, it's independent from s9y. You could use any kind of preloader, google for "jquery preload images" for example.

I tried adding script to the head, which immediately gave me an error. I tried a function, also error.

And now, what you you done so that your original problem is resolved? It might be important for other readers who look up this thread.

I didn't solve it, I worked around it. I converted all images into PNGs and used a full URI for the footer image.

Instead of preloading, you could also do your images as sprites - only a single image file is loaded.

A sprite would also load after the entries/content are loaded first. So that's no solution. Additionally, it's not about rollovers, these images are background images (header, body, navbar, footerbar), all with different dimensions.

Cheers,

Dachs

[yellowled]

What is

Code: Select all

/plugin/pngbehavior.htc

?

That's part of the browsercompatibility event plugin. I think it is supposed to fix bugs with PNG alpha transparency in IE6 or something, but I'm not 100% sure since I usually disable that plugin. I seem to remember it causing more problems than actually helping.

YL

[user1234]

Hi,

hmmm ... could it be part of that PNG-mystery? I will check this one out also later. I liked s9y so far greatly, it's a good blog system to hand over to noobs and I expect I will use it more often once I can be sure that everything will work to order.

Cheers,

Dachs

[Don Chambers]

A sprite would also load after the entries/content are loaded first. So that's no solution. Additionally, it's not about rollovers, these images are background images (header, body, navbar, footerbar), all with different dimensions.

I use background images in banners and body all the time - I have never noticed any significant delay in loading. If done efficiently, there is also no need to worry about different dimensions. Here is another good article on sprites: http://www.smashingmagazine.com/2009/04 ... tutorials/

[yellowled]

could it be part of that PNG-mystery?

As far as I can see, only if you use IE6 (or older; in that case: yikes!) exclusively to check your test site -- I wouldn't expect someone with your obvious web dev background to do so ..?

YL

[user1234]

Hi,

As far as I can see, only if you use IE6 (or older; in that case: yikes!) exclusively to check your test site -- I wouldn't expect someone with your obvious web dev background to do so ..?

Errrr ... not! Firefox.

I use background images in banners and body all the time - I have never noticed any significant delay in loading.

I can assure you, even on my own comp on a XAMPP install I can count to ten before the template images load, after all the rest in the content area when looking at the front page entries.

So, I still need a lead on how to install a preloader on s9y

Cheers,

Dachs

[Don Chambers]

I can assure you, even on my own comp on a XAMPP install I can count to ten before the template images load, after all the rest in the content area when looking at the front page entries.

So, I still need a lead on how to install a preloader on s9y

But what is the cause for the delay? Huge image files, or a ton of content? You can also speed up your site by tweaking your .htaccess with stuff like:

Code: Select all

# CACHE IMAGES AND STYLESHEETS
<IfModule mod_expires.c>
ExpiresActive on
ExpiresByType image/jpg "access plus 90 minutes"
ExpiresByType image/jpeg "access plus 90 minutes"
ExpiresByType image/gif "access plus 90 minutes"
ExpiresByType image/png "access plus 90 minutes"
ExpiresByType image/ico "access plus 90 minutes"
ExpiresByType text/css "access plus 90 minutes"

<FilesMatch "\.(ico|pdf|flv)$">
Header set Cache-Control "max-age=172800, public"
</FilesMatch>

<FilesMatch "\.(jpg|jpeg|png|gif|css|swf)$">
Header set Cache-Control "max-age=5400, public"
</FilesMatch>
</IfModule>

#GZIP stylesheets
<IfModule mod_deflate.c>
<FilesMatch "\.(css)$">
SetOutputFilter DEFLATE
</FilesMatch>
</IfModule>

Other people may have additional suggestions... server tweaking has never been an expertise of mine.

You can also look into opcode cache like zend platform, XCache, APC etc....

The real problem we cannot see your site in action, and you have not posted any code modifications.... Perhaps we should just give you a chance to tweak what you can in XAMPP, then get a site live, then continue trying to help you fine tune serendipity at that time.

[user1234]

Hi Don,

I hate to be repetitive, but the way the code is written with s9y EVERYTHING gets loaded first BUT template images. This may be a logical thing to do to evade contentless loading of huge graphics with hopeless webmasters and of course content-first is ideal for Google SEO, for accessibility and for search engines in general, but in this case the result isn't great.

All my template graphics put together weigh only 18 kb and there are only 4 files except for what Bulletproof also provides (like e.g. the RSS feed image). Now, when I open a category the posts get loaded. Text would be fine, it's fast, but the owner posts pictures. Then the Digg it plugin has 10 graphics or what, the second entry has pictures, the third ... and the fifteenth also loads pictures -- and NOW finally the background images load.

That's pretty normal as such CSS driven sites go, every webmaster implementing rollovers or other CSS-driven image-based design knows this problem. That's why sprites, preloading scripts or negatively positioned images were invented. So why are you astonished the same effect is at work with s9y?

What I need is someone giving me a hint how to implement a preloader script with s9y. So is there actually someone who knows how to best bind such a script in so it gets called on BEFORE all the other stuff is called on?

Cheers,

Dachs

[user1234]

Hi,

okay, managed to implement this now.

Cheers,

Dachs

[garvinhicking]

Hi!

Which code did you try for preloading? If it gave you an error, why don't you tell the error to us? That would make us able to help you.

My glas orb reveals me you might have pasted javascript into your .tpl file, and forget to replace { with {ldelim} and } with {rdelim}, or did not enclose the whole javascript within a {literal}...{/literal} block, due to Smarty grabbing the { and } for itself?

Also, please, if you ask here for solutions that we try to give you (and to which we dedicate our time to), please post your own solutions once you've found a way, for others to be able to reproduce your problems and solutions.

Regards,
Garvin

[user1234]

Hi,

you wouldn't have needed a glass orb, I wrote what happened above, precisely after what action it happened. Reading helps sometimes. Not so in my case, as I wasn't aware of the fact that code even inside the .tpl files needs to be wrapped, I believed that was for code implemented in entries. Wasn't clear to me from the docs. So that's that.

The preloader I used was the lightest script I could find, and now it works just peachy.

Cheers,

Dachs