緩存圖像，然後將它們加載到一個表中的javascript

Question

我有一項任務，涉及到創建一個簡單的購物車。會有一個供用戶選擇的項目列表，其中包括每個項目的圖片。在將它們添加到我的表格之前，我必須緩存圖像。我的問題是，我的緩存和加載圖像的功能沒有任何作用。所發生的只是表格顯示圖像。

1. 這裏是我的表，以及在調用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> 
   

2. 這裏是我的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。