Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

HTML

Posted by Konstantin Nikkari
Konstantin Nikkari
5,185 Points

How to preload an image

Hello!

This website www.myinkamppas.fi has interesting intro photo with nice menu. The problem is that when you enter the site first time you don't see this photo. I takes sometimes up to 2 sec the photo to load and before that you see the background color.

Please give me some method to speed up the loading process of the image or maybe do something like nothing of the page is seen before this particular photo is loaded.

This jumping nikes image is attached as a background image to div that holds all the other elements in the section. So to all my understanding it should load before the REMAX logo or the menu.

<div id="presents">
          <img id="remax-logo" src="img/remax_logo.png" alt="Remax logo">
          <p id="presents-paragraph">esittää</p>
          <h1 class="negative-topic">KOE <span id="changing-word">ERINOMAISEN</span><br /> ASUNTOVÄLITTÄJÄN PALVELUT
          </h1>
          <div id="navigation">
            <div class="navigation-grid-col">
              <ul id="navigation-top" class="navigation-grid-box navigation-animation-button">
                <li><h4 class="navigation-text">Palvelu</h4></li>
              </ul>
              <ul id="navigation-topleft" class="navigation-grid-box navigation-animation-button">
                <li><h4 class="navigation-text">Asiakas</h4></li>
              </ul> 
              <ul id="navigation-midleft" class="navigation-grid-box navigation-animation-button">
                <li></li>
              </ul> 
            </div>
            <div class="navigation-grid-col">
              <ul id="navigation-topright" class="navigation-grid-box navigation-animation-button">
                <li><h4 class="navigation-text">Asunnot</h4></li>
              </ul>

<!--     ...    -->

                <li><h4 class="navigation-text">Yhteystiedot</h4></li>
              </ul>
            </div>
          </div>
        </div>

#presents {
  position: relative;
  margin: 0;
  padding: 1px 0;
  background: #8c9094 url("../img/koe_kristinan_palvelu.jpg") no-repeat center bottom;
/*  background: #93948C url("../img/koe_kristinan_palvelu.jpg") no-repeat center bottom;*/
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  height: 750px;
}

The JPG is progressive and it is also optimized for the web.

Christopher van Ruitenbeek
Christopher van Ruitenbeek
13,705 Points

Hi Konstatin,

This tool can help speed up your website in general: http://gtmetrix.com/reports/www.myinkamppas.fi/Oq6jGO6g

For an image pre-load, checkout these resources (you will probably need JavaScript to do this):

Currently it looks like it is very depending on internet connection speed whether the images show or not. I had no problems loading your page at all.

I hope you can use some of these resources.

Rogelio Delgado
Rogelio Delgado
13,563 Points

You could do a "cache" div at the beginning of the page with the images you want to load, you can put the diva as display none with CSS. What happens is the browser loads this images before they are actually presented in your HTML making a sort of "cache" function for you.