Images
Cache

Discussion

• Cache
  • You can save your images so that you don't have to wait for them to continually download.
  • Click on JackhammerCache.html
  • Look at the animation.
  • Right click on the page and View Source.
  • Resize the window of the source code to the right half of the screen.
  • The JavaScript in the head accomplishes downloading the images before the setInterval() is called.
    • The variable jackhammers is a special type of variable called an array. That means that there are multiple variables with the same name but identified by position (called elements or subscripts). The jackhammers array has 11 elements.
    • When defined, an array can be sized. However, the subscripts show how many positions that element is from the top of the array. So, the first element is array[0]. When an array is of size 11, the positions are 0 through 10. The last element being 10 away from the top.
    • There is a for loop which repeats code until a condition is met.
      • The syntax for a for loop is
        for(declare and define a variable; test a condition; update the value tested in the condition)
      • In this example, a variable i is created and initialized to 0.
        The value of i is tested to see if it is less than 11.
        i is incremented.
      • The order that the statements inside the parentheses are followed are:
        1. The declaration and definition are executed once at the start of the loop.
        2. The test of condition is performed
           • When the test is true, the statements within the loop are followed.
           • When the test is false, control moves to the statement below the end of the loop.
        3. If control stays in the loop, the statements within the loop are followed sequentially.
        4. At the end of the loop, control goes to the update of the value used in the condition.
      • This for loop will execute 11 times. The first time i will contain the value 0. The last time through the loop, i will be 10. Once i is incremented to 11, the test of condition fails, and the loop ends.
    • The statements inside the loop
      • jackhammers[i] = new Image();
        defines the first element of the array jackhammers to be an Image object.
      • jackhammers[i].src = "jackhammer" + i + ".gif";
        assigns the src attribute of the Image object to be the image jackhammer0.gif
        (the string concatenation was introduced in ConcertAds2.html)
      • if (i == 10)
        tests to see if i is equal to 10
        (the if was introduced in ConcertAds3.html)
        When i is equal to 10, the setInterval() function is called and begin is assigned true.
    • After the statements inside the loop are executed, control goes to the incrementation.
    • After the incrementation, the test of condition is executed and either the statements within the loop are executed again, or the loop is completed.

Practice

• Save your page with a new name and cache your images.
• Make any corrections for any page that does not validate or display correctly.