Question

我的作业涉及到我创建一个简单的购物车。将有一个供用户选择的项目列表，其中包括每个项目的图片。在将图像添加到表格之前，我必须先缓存图像。我的问题是，我的缓存和加载图像的功能没有做任何事情。所有发生的事情是表格显示图像。

这是我的表格，以及对cacheImages()功能的调用

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

这是我的cacheImages（）函数，它位于链接到我的htm文档的单独.js文件中

        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;


    }

Answer 1

您需要为图像路径切换为正斜杠/。反斜杠只是逃避它前面的角色，所以它是一条不存在的路径。例如，"images\camera.jpg"将提供'imagescamera.jpg。

缓存图像，然后将它们加载到javascript中的表中

1 个答案: