2016-12-30 5 views
0

안녕하세요. 멋진 사람들,Src 속성 변경 후 이미지 업데이트

'src'속성을 변경 한 후 이미지를 업데이트하려고합니다. URL에 날짜 스탬프를 추가하려고 시도했지만 작동하지 않는 것 같습니다. 누군가 내가 잘못 가고있는 것을 나에게 보여줄 수 있습니까 아니면 그냥 함께 더 좋은 방법을 제안 할 수 있습니까?

어디에 문제가 있는지 잘 모르겠습니다. 현재까지 전체 코드를 포함 시켰습니다. 나는 두렵다. 나는 두려워한다. 'displayOut'함수의 처음 세 줄은 문제가있는 곳일 가능성이 큽니다. 당신의 도움에 미리 감사드립니다.

var db = [{ // ROOMS 
 
    rooms: [{ // Room 0 - North room 
 
     description: "You awake to find yourself in a dank smelling old room, plaster and smashed glass litters the floor. To the North is a broken window, beyond which you can only see a thick grey mist. There is one door by which to exit, to the South.", 
 
     roomImg: "images/room_0.jpg", 
 
     exits: { 
 
     north: false, 
 
     south: 1, 
 
     east: false, 
 
     west: false, 
 
     up: false, 
 
     down: false 
 
     }, 
 
     roomInvent: ["a Box of Matches", "a Glass Shard"] 
 
    }, { // Room 1 - Corridor 
 
     description: "You are in a short, dark corridor, a single tungsten bulb hangs stiffly from the ceiling. There is a light switch on the wall.", 
 
     roomImg: "images/room_1.jpg", 
 
     exits: { 
 
     north: 0, 
 
     south: 4, 
 
     east: 3, 
 
     west: false, 
 
     up: 5, 
 
     down: false 
 
     }, 
 
     roomInvent: [] 
 
    }, { // Room 2 - West Room - Locked room 
 
     description: "", 
 
     roomImg: "images/room_2.jpg", 
 
     exits: { 
 
     north: false, 
 
     south: false, 
 
     east: false, 
 
     west: false, 
 
     up: false, 
 
     down: false 
 
     }, 
 
     roomInvent: [] 
 
    }, { // Room 3 - East room - Bedroom 
 
     description: "You are in the Bedroom", 
 
     roomImg: "images/room_3.jpg", 
 
     exits: { 
 
     north: false, 
 
     south: false, 
 
     east: false, 
 
     west: 1, 
 
     up: false, 
 
     down: false 
 
     }, 
 
     roomInvent: [] 
 
    }, { // Room 4 - South room - kitchen 
 
     description: "You are in a small kitchen. There is an old log fire on the East wall, and a door leading outside to the South.", 
 
     roomImg: "images/room_4.jpg", 
 
     exits: { 
 
     north: 1, 
 
     south: false, 
 
     east: false, 
 
     west: false, 
 
     up: false, 
 
     down: false 
 
     }, 
 
     roomInvent: [] 
 
    }, { // Room 5 - Attic 
 
     description: "You are in the Attic.", 
 
     roomImg: "images/room_5.jpg", 
 
     exits: { 
 
     north: false, 
 
     south: false, 
 
     east: false, 
 
     west: false, 
 
     up: false, 
 
     down: 1 
 
     }, 
 
     roomInvent: [] 
 
    }] 
 
    }, // End Rooms 
 
    { // ITEMS 
 
    items: [{ 
 
     itemIndex: 0, 
 
     name: "a Box of Matches", 
 
     useWith: null, 
 
     examine: "There is only a single match inside." 
 
    }, { 
 
     itemIndex: 1, 
 
     name: "a Glass Shard", 
 
     useWith: null, 
 
     examine: "It looks sharp" 
 
    }, { 
 
     itemIndex: 2, 
 
     name: "a Mallet", 
 
     useWith: null, 
 
     examine: "It is old and rusty, but otherwise uninteresting." 
 
    }] 
 
    } 
 

 
]; //End db 
 

 
var inventory = []; 
 
var inputTextBox = document.getElementById("inputTextBox"); 
 
var diologueBox = document.getElementById("diologueBox"); 
 
var strOut = ""; 
 
var roomLoc = 0; 
 

 

 

 
function displayOut() { 
 
    // images 
 
    let dt = new Date; 
 
    document.getElementById("imgBox").setAttribute("src", db[0].rooms[roomLoc].roomImg + "?dt=" + dt.getTime()); 
 
    // Diologue box 
 
    diologueBox.innerHTML = db[0].rooms[roomLoc].description + 
 
    (function() { // Check if room has items in inventory, if so, list them. 
 
     if (db[0].rooms[roomLoc].roomInvent != "") { 
 
     return "<br><br> The room contains " + 
 
      (function() { 
 
      let items = ""; 
 
      for (let i = 0; i < db[0].rooms[roomLoc].roomInvent.length; i++) { 
 
       items += db[0].rooms[roomLoc].roomInvent[i] + ", "; 
 
      }; 
 
      items = items.slice(0, items.length - 2); 
 
      return items; 
 
      })(); 
 
     } else { 
 
     return "<br><br> The room is empty "; 
 
     }; 
 
    })(); 
 
}; 
 
// Function for changing room location 
 
function navigateTo(direction) { 
 
    if (db[0].rooms[roomLoc].exits[direction] === false) { 
 
    outputBox.innerHTML = "You cannot go " + direction + " from here." 
 
    } else { 
 
    roomLoc = db[0].rooms[roomLoc].exits[direction]; 
 
    displayOut(); 
 
    } 
 
} 
 

 
inputTextBox.addEventListener("keypress", function(event) { 
 
    let x = event.which || event.keyCode; 
 
    if (x === 13) { // 13 is the Return key 
 
    switch (inputTextBox.value.toLowerCase()) { 
 
     //Diologue Navigation 
 
     case "": 
 
     // Nothing happens 
 
     break; 
 
     case "north": 
 
     case "n": 
 
     navigateTo("north"); 
 
     break; 
 
     case "south": 
 
     case "s": 
 
     navigateTo("south"); 
 
     break; 
 
     case "east": 
 
     case "e": 
 
     navigateTo("east"); 
 
     break; 
 
     case "west": 
 
     case "w": 
 
     navigateTo("west"); 
 
     break; 
 
     case "up": 
 
     case "u": 
 
     navigateTo("up"); 
 
     break; 
 
     case "down": 
 
     case "d": 
 
     navigateTo("down"); 
 
     break; 
 
     //Dioogue Help 
 
     case "help": 
 
     outputBox.innerHTML = " Here is a list of useful commands: North, South, East, West, Up, Down, Look, Examine, Inventory, Take, Use"; 
 
     break; 
 
     // 
 
     default: 
 
     outputBox.innerHTML = " I have no idea what " + "'" + inputTextBox.value.bold() + "'" + " means..."; 
 
    } // End switch 
 

 
    //Clear InputTextBox 
 
    inputTextBox.value = ""; 
 
    inputTextBox.setAttribute("placeholder", ""); 
 

 

 
    } // End KeyPress 
 
}); // End Event listener 
 

 
displayOut();
@charset "utf-8"; 
 
@font-face { 
 
    font-family: 'Terminal'; 
 
    /*a name to be used later*/ 
 
    src: url(lcd_solid.ttf); 
 
    /*URL to font*/ 
 
} 
 
* { 
 
    font-family: Terminal; 
 
    font-size: 18px; 
 
    margin: 0; 
 
    border: 0; 
 
} 
 
body, 
 
html { 
 
    font-family: helvetica; 
 
    font-size: 12px; 
 
    background: #282828; 
 
} 
 
#imgBox { 
 
    margin: 0px auto 0px auto; 
 
    background-image: url("../images/room_0.jpg"); 
 
    background-repeat: no-repeat; 
 
    height: 600px; 
 
    width: 1024px; 
 
} 
 
#conBox { 
 
    margin: 0px auto 0px auto; 
 
    position: relative; 
 
    width: 1024px; 
 
    height: 300px; 
 
} 
 
#diologueBox { 
 
    background: #CCC; 
 
    height: 200px; 
 
    clear: both; 
 
    padding: 1px 0px 1px 3px; 
 
    overflow: none; 
 
    position: relative; 
 
} 
 
#diologueBox p { 
 
    margin: 5px; 
 
    left: 0px; 
 
    bottom: 0px; 
 
} 
 
#outputBox { 
 
    background: #CCC; 
 
    height: 50px; 
 
    clear: both; 
 
    padding: 1px 0px 1px 3px; 
 
    overflow: none; 
 
    position: relative; 
 
} 
 
#inputBox { 
 
    position: relative; 
 
    height: 20px; 
 
    background: #C1C1C1; 
 
} 
 
#inputTextBox { 
 
    height: 18px; 
 
    padding: 1px; 
 
    float: right; 
 
    width: 1004px; 
 
    background: #C1C1C1; 
 
} 
 
::-webkit-input-placeholder { 
 
    color: red; 
 
} 
 
:-moz-placeholder { 
 
    /* Firefox 18- */ 
 
    color: red; 
 
} 
 
::-moz-placeholder { 
 
    /* Firefox 19+ */ 
 
    color: red; 
 
} 
 
:-ms-input-placeholder { 
 
    color: red; 
 
} 
 
#inputTextBox.focus, 
 
input:focus { 
 
    outline: none; 
 
} 
 
#bullet { 
 
    width: 15px; 
 
    float: left; 
 
    padding: 4px 0px 1px 3px; 
 
}
<!DOCTYPE html> 
 
<html lang="en"> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script> 
 
    <link rel="stylesheet" type="text/css" href="styles/style.css"> 
 
    <meta charset="utf-8"> 
 
    <title>Untitled</title> 
 
</head> 
 

 
<body> 
 
    <div id="imgBox"></div> 
 
    <div id="conBox"> 
 
    <div id="diologueBox"></div> 
 
    <div id="outputBox"></div> 
 
    <div id="inputBox"> 
 
     <div id="bullet">></div> 
 
     <input id="inputTextBox" type="text" maxlength="60" placeholder="Type commands here, type 'Help' at any time for list of commands" autofocus></input> 
 
    </div> 
 
    </div> 
 

 
    <script src="script2.js"></script> 
 

 
</body> 
 

 
</html>

+0

'하자'와 'CONST는'올바른을 보장하는 단지 방법 범위. 나는 그것을 넣은 곳이 어디에도 필요하지 않다는 것을 안다. 그러나 내가 생각하는 나의 발전의 미래를위한 좋은 연습이다. – Cuckoo

답변

1

빠른 솔루션 : 당신이 당신의 CSS에서 수행 한대로 배경 이미지를 사용합니다.

그러나 src 속성을 변경하면 jquery가 어떻게 처리하는지 잘 모르겠습니다.

배경을 사용하여, 당신은 수있는 옵션이없는 경우 :

  • 당신의 HTML에서 모든 <img> 및/숨기기 한 그들에게 보여 (빠른하지만 선행 모든로드해야합니다)
  • 가 IMG를 만들 요소를 $("<img/>")과 함께 즉시 사용하고 이전 요소를 교체하십시오. 귀하의 유스 케이스를 감안할 때, 매우 저렴한 ressource-wise입니다.
  • 이미지를 페인트 캔버스를 사용하여 (그러나 왜 배경 이미지를 사용하지?) 난 그냥 모두를 사용하기 시작하고있어
+0

감사합니다! 나는 내가 이것을 과도하게 생각하고 있다는 것을 알았고, 나는 background-img 옵션을 가지고 갔다. 고맙습니다! :) – Cuckoo

+0

Canvas 및 은 마우스 오른쪽 버튼으로 클릭하면 배경 이미지가 저장 될 수 있습니다. – Noino