0

I have an assignment that involves me creating a simple shopping cart. There will be a list of items for the user to choose from, which includes a picture for each item. I have to cache the images before I add them to my table. My problem is, my function for caching and loading the images does not do anything. All that happens is the table displays the image alts.

  1. Here's my table, as well as the call to the cacheImages() function

           <script type="text/javascript">
          cacheImages();
        </script>

        <table id="electronicTable">
        <tr id="el1">
        <td><img src="" alt="Camera" height="66" width="100" /></td>
        <td>Digital Camera</td>
        <td>$75.99</td>
        <td><input type="button" value="add"
            onclick="addItem(document.getElementById('el1').rowIndex)" /></td>
        </tr>
        <tr id="el2">
        <td><img src="" alt="Dvd Player" height="100" width="100" /></td>
        <td>Portable DVD Player</td>
        <td>$35.99</td>
        <td><input type="button" value="add"
            onclick="addItem(document.getElementById('el2').rowIndex)" /></td>
        </tr>
        <tr id="el3">
        <td><img src="" alt="Headphones" height="100" width="100" /></td>
        <td>Headphones</td>
        <td>$45.99</td>
        <td><input type="button" value="add"
            onclick="addItem(document.getElementById('el3').rowIndex)" /></td>
        </tr>
        <tr id="el4">
        <td><img src="" alt="Microwave Oven" height="66" width="100" /></td>
        <td>Microwave Oven</td>
        <td>$75.99</td>
        <td><input type="button" value="add"
            onclick="addItem(document.getElementById('el4').rowIndex)" /></td>
        </tr>
        <tr id="el5">
        <td><img src="" alt="Blutooth speaker" height="77" width="100" /></td>
        <td>Bluetooth Stereo Speaker</td>
        <td>$89.99</td>
        <td><input type="button" value="add"
            onclick="addItem(document.getElementById('el5').rowIndex)" /></td>
        </tr>
        </table>

  2. And here is my cacheImages() function, which is in a seperate .js file linked to my htm document

            function cacheImages(){

             var cameraImage = new Image();
             cameraImage.src = "images/camera.jpg";

             var dvdImage = new Image();
             dvdImage.src = "images/dvdPlayer.jpg";

             var headphonesImage = new Image();
             headphonesImage.src = "images/headphones.jpg";

             var microwaveImage = new Image();
             microwaveImage.src = "images/microwave.jpg";

             var stereoImage = new Image();
             stereoImage.src = "images/stereo.jpg";

             document.images[0].src = cameraImage.src;
             document.images[1].src = dvdImage.src;
             document.images[2].src = headphonesImage.src;
             document.images[3].src = microwaveImage.src;
             document.images[4].src = stereoImage.src;


    }
Brian Tompsett - 汤莱恩
  • 5,753
  • 72
  • 57
  • 129
Historiun
  • 103
  • 2
  • 8
  • what is `document.images[0]` and so on? Where and how you assign it? – Kyojimaru Oct 30 '14 at 05:07
  • @Kyojimaru, document.images[0] is the first image element on my page. So its the first img in the table. – Historiun Oct 30 '14 at 05:09
  • can you try using the full path or the path from the `root`, is it working? – Kyojimaru Oct 30 '14 at 05:14
  • In case you're interested, here's a [generic image caching algorithm](http://stackoverflow.com/questions/10240110/how-do-you-cache-an-image-in-javascript/10240297#10240297). Then, rather than keep track of all the `img` objects, you can just assign the desired url to `.src` and it will already be in the browser cache so will load immediately. – jfriend00 Oct 30 '14 at 05:19

1 Answers1

0

You need to switch to forward slashes / for your image paths. The backslash is just escaping the character in front of it, so it's a path that doesn't exist. For example "images\camera.jpg" will give 'imagescamera.jpg.

jfairbank
  • 151
  • 1
  • 5