Announcement

Collapse
No announcement yet.

Preloading Images

Collapse
X
  • Filter
  • Time
  • Show
Clear All
new posts

  • Preloading Images

    This is a general FYI.

    <mvt:rant>
    I work on a lot of sites. Some developers are still using javascript to preload images (circa 2001). It seems they learned one trick and have been using it ever since. Often this comes in the form of a large .js library they are adding to every site they work on even though they only use 1 or 2 the functions. I'd like to demonstrate a simpler method.
    </mvt:rant>

    Many browsers display the page then display background images last. This is somtimes un-desirable.

    Simply preload your imaged directly in the <body> tag area, using style="display: none" as shown below.

    <body>
    <img src="/images/site_background.jpg" alt="preload this image" style="display: none">
    <img src="/images/header_background.jpg" alt="preload this image" style="display: none">

    enjoy
    Ray Yates
    "If I have seen further, it is by standing on the shoulders of giants."
    --- Sir Isaac Newton

  • 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.
    Bruce Golub
    Phosphor Media - "Your Success is our Business"

    Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
    phosphormedia.com

    Comment


    • 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.
      Leslie
      www.lesliekirk.com | Twitter | Facebook
      Past Web Production Manager for eMediaSales
      Previously of www.websyourway.com
      Forum Moderator lesliekirk
      Miva Merchant and more ... since 1997

      Comment


      • 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)
        Last edited by Dan - Glendale Designs; 12-05-09, 07:48 AM.

        Comment


        • 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:
          <!-- Welcome Message: Start with <table><tr><td> -->

          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> <!-- End of Welcome Message --> (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.
          Last edited by Bruce - PhosphorMedia; 12-05-09, 10:04 AM.
          Bruce Golub
          Phosphor Media - "Your Success is our Business"

          Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
          phosphormedia.com

          Comment


          • 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 }
            Ray Yates
            "If I have seen further, it is by standing on the shoulders of giants."
            --- Sir Isaac Newton

            Comment


            • 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:

              <!-- Individual Cat Header -->
              <mvt:item name="cat_head/foot" param="head" />
              <!-- /Individual Cat Header -->

              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.
              Bruce Golub
              Phosphor Media - "Your Success is our Business"

              Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
              phosphormedia.com

              Comment


              • 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
                Larry
                Luce Kanun Web Design
                www.facebook.com/wajake41
                www.plus.google.com/116415026668025242914/posts?hl=en


                Comment


                • 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.
                  Bruce Golub
                  Phosphor Media - "Your Success is our Business"

                  Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
                  phosphormedia.com

                  Comment


                  • Re: Preloading Images

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

                    Rick Wilson
                    CEO
                    Miva, Inc.
                    [email protected]
                    https://www.miva.com

                    Comment


                    • 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

                      Comment

                      Working...
                      X

                      This website uses cookies to identify visitors, track visitors to our website, store login session information and to remember your user preferences. By continuing to use this site you agree to our use of cookies. Learn More.

                      This website uses cookies. By continuing to use this site you agree to our use of cookies. Learn More.

                      Accept