Announcement

**Bruce - PhosphorMedia** · 12-04-09, 11:07 AM

Re: Preloading Images

Perhaps simplier, but along the same lines...stuff this in style sheet or style tags

.preload {
display:none;
background-image:url('path-to-file1.jpg');
background-image:url('path-to-file2.jpg');
background-image:url('path-to-file3.jpg');
etc
}

But, yea, I'd like to add my rant to developers/intergrators/storeowners who leave in spurious, overweight and obsolete code.

**leslienord** · 12-05-09, 05:14 AM

Re: Preloading Images

Hmmm, I may or may not be one of "those" but I would like to figure out how to explain NOT to include <HTML><HEAD> and <BODY> tags in descriptive fields.

I really am trying to put my code on a diet. Maybe we need to start a code diet bootcamp.

**Dan - Glendale Designs** · 12-05-09, 07:48 AM

Re: Preloading Images

I have recently worked on multiple stores with over 2000 lines of code per page template, one of which also included 5 external css files, 3 external javascript files and inline js/css on almost every line of template code to boot. The client in the latter case refused to update the code despite my repeated requests... resulting in a substantial increase in the overall development costs of the project.

While I agree there are a number of store integrators/developers (module developers) out there that still use bloated, outdated code, there are also a number of instances where it is at the demand of the client to save a buck in the short term. (long term their store will most likely cost twice as much to maintain as a well optimized store, or even worse be completely unsuccessful as a result)

There is my <mvt:rant> and the cause for many sleepless nights and nightmares. (I write code in my sleep)

**Bruce - PhosphorMedia** · 12-05-09, 10:03 AM

Re: Preloading Images

Originally posted by leslienord View Post

Hmmm, I may or may not be one of "those" but I would like to figure out how to explain NOT to include <HTML><HEAD> and <BODY> tags in descriptive fields.

I really am trying to put my code on a diet. Maybe we need to start a code diet bootcamp.

Some tips for code diet:

1) Document the code. If you place a javascript reference or function, make sure you add a comment as to what it does. For example:

// Used to launch Bouncing Foo Ball feature.

That way; if the Bouncing Foo Ball feature is removed later on, you, the client or another developer can easily see that this code is superfluous.

2) Document content: While this may add some code weight, in the balance if can prevent other content abuses (i.e, adding doctype, head, body tags to internal content. For example, in the storefront welcome message, add:


3) Use CSS. Nothing says bloat like <font size=1><font color=blue><strong></strong><font size=2>Text</font></etc>. Using CSS also makes it easier for non HTML saavy folks to get the content in the right place as the class names can guide the way. For example, <div class="WelcomeMessage"> </div>  (and although it doesn't validate in all cases, I've been using <div class=name></div class=name> to make it easier to see the container.

4) In CSS use class groups. For example, instead of:

Code:

.class1 {this:that; the:other; and:still more; andmore:ofthisstuff}
.class2 {this:that; the:other; and:still more; andmore:someother}
.class3 {this:that; the:other; and:still more; andmore:notenough}

You can have:

Code:

.class1 {this:that; the:other; and:still more; andmore:ofthisstuff}
.class2 {andmore:someother}
.class3 {andmore:notenough}

And use <div class="class1 class2">

(This actually doesn't save as much load as it saves sanity...but when i started doing this, my rules dropped 50%...making it easier to update.

**RayYates** · 12-05-09, 08:51 PM

Re: Preloading Images

Leslie,

For those un-trainable clients who can't seem to remember to make keep the head and body tags out of the various fields like the description, I recently added the body_innerHTML() function to My Toolbelt Module.

<mvt:item name="ry_toolbelt" param="eval|body_innerHTML(l.all_settings: product:descrip)" />

This is also usefull if you are loading a static html file with file_read() or getting the file from another web page with the Get command.

Dan

I'm currently cleaning up a site with so many nested tables that, in one extreame portion, 60 lines of HTML have been converted to about 6 lines + css. I feel your pain <grin>

Bruce

I use <mvt:comment> </mvt:comment> instead of  It gets stripped out by the template compiler and adds zero weight to the page. Otherwise I heartily concur.

More css tips. If anyone reading this does not understand css inheritance, it's worth 20 minutes of your time to learn it.

Assign the class or id to the container and not each element in the container.

Code:

.header_tr td { styles for each <td> goes here here }
<tr class="header_tr">
    <td>name</td>
    <td>address</td>

Instead of
    <td class="header">name</td>
    <td class="header">address</td>

Don't forget you can use commas and style several things in one declaration and Apply styles to everything in a container at one time.

Code:

Clean HTML  + efficient css = low maintenance.
<div id="footer_links">
    <h3>Visit my friends:</h3>
    <a href=".....">.....</a> |
    <a href=".....">.....</a> |
</div>    

/* applies to everything */
#footer_links * { font-size: 13px; } 

/* redefine the h3 tag */
#footer_links h3 { font-weight: bold; display: inline} 

/* two declarations one style */
#footer_links a:link, #footer_links a:visited { styles go here } 
#footer_links a:hover, #footer_links a:active { styles go here }

**Bruce - PhosphorMedia** · 12-06-09, 09:49 AM

Re: Preloading Images

[QUOTE=RayYates;109937]
Bruce

I use <mvt:comment> </mvt:comment> instead of  It gets stripped out by the template compiler and adds zero weight to the page. Otherwise I heartily concur.
[QUOTE]

Correct, however...the fact that they get stripped out can become a problem for client/others maintaining the site. For example, using:


<mvt:item name="cat_head/foot" param="head" />


Will let the next person who works on the site know where that content came from.

While all in favor of clean, tight code, documentation and ease of updating is usually worth the trade-off on file size.

**wajake41** · 06-04-10, 09:10 AM

Re: Preloading Images

RE: Preloading images via:
<img src="/images/header_background.jpg" alt="preload this image" style="display: none">

We have a PDF sales flyer that I would like to display faster. Can this be used to preload the pdf file? Or is there a better way?

Thanks, Larry
www.rvparksupplies.com

**Bruce - PhosphorMedia** · 06-04-10, 09:54 AM

Re: Preloading Images

No, that wont work...and its probably a bad idea as every page load would start transferring a file that probably 90% would not look at.

Better would be:

Tell folks upfront it will take a bit to open the file.

Go back to the source file and see if you can limit options to reduce size. For example, by default a lot of PDF generators include thumbnails...but 99% of end readers don't use them cause they don't know they exist.

**Rick Wilson** · 06-04-10, 10:50 AM

Re: Preloading Images

Diet Code Bootcamp could be a good track at the conference, hmmm.....

**larryp7639** · 06-25-10, 02:23 AM

Re: Preloading Images

Originally posted by RayYates View Post

Leslie,

For those un-trainable clients who can't seem to remember to make keep the head and body tags out of the various fields like the description, I recently added the body_innerHTML() function to My Toolbelt Module.

<mvt:item name="ry_toolbelt" param="eval|body_innerHTML(l.all_settings: product:descrip)" />

This is also usefull if you are loading a static html file with file_read() or getting the file from another web page with the Get command.

Dan

I'm currently cleaning up a site with so many nested tables that, in one extreame portion, 60 lines of HTML have been converted to about 6 lines + css. I feel your pain <grin>

Bruce

I use <mvt:comment> </mvt:comment> instead of  It gets stripped out by the template compiler and adds zero weight to the page. Otherwise I heartily concur.

More css tips. If anyone reading this does not understand css inheritance, it's worth 20 minutes of your time to learn it.

Assign the class or id to the container and not each element in the container.

Code:

.header_tr td { styles for each <td> goes here here }
<tr class="header_tr">
    <td>name</td>
    <td>address</td>

Instead of
    <td class="header">name</td>
    <td class="header">address</td>

Don't forget you can use commas and style several things in one declaration and Apply styles to everything in a container at one time.

Code:

Clean HTML  + efficient css = low maintenance.
<div id="footer_links">
    <h3>Visit my friends:</h3>
    <a href=".....">.....</a> |
    <a href=".....">.....</a> |
</div>    

/* applies to everything */
#footer_links * { font-size: 13px; } 

/* redefine the h3 tag */
#footer_links h3 { font-weight: bold; display: inline} 

/* two declarations one style */
#footer_links a:link, #footer_links a:visited { styles go here } 
#footer_links a:hover, #footer_links a:active { styles go here }

Thanks you for the post.

__________________
Watch Grown Ups Online Free

Announcement

Preloading Images

Preloading Images

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment