來自Google地方信息的圖片需要刷新頁面

Question

我遇到了我認為可能是緩存錯誤或異步錯誤的消息，但不確定。

本質上，我有一個javascript函數來獲取用戶輸入的地點的Google地方信息圖像。

這是該函數：

function getInitialImage(placeIdentifier) {

    service = new google.maps.places.PlacesService(document.createElement('div'));

    request = {placeId: ""+placeIdentifier+""};

service.getDetails(request, function(result, status) {
  if (status !== google.maps.places.PlacesServiceStatus.OK) {
    console.log(status);
    return;

  } else {

      photoUrl = result.photos[0].getUrl({maxWidth: 300});
      sessionStorage.setItem("photoUrl", photoUrl);
      htmlAttr = result.photos[0].html_attributions;
      sessionStorage.setItem("htmlAttr", htmlAttr);
  }

})

photoUrl = sessionStorage.getItem("photoUrl");
htmlAttr = sessionStorage.getItem("htmlAttr");

return {
    photoUrl: photoUrl,
    htmlAttr: htmlAttr
}; 

}

這是我在“主頁”頁面上調用和使用該函數的方式：

placeIdent = "<?php echo $placeID?>"; 

  console.log(placeIdent);

  photoUrl = "";

  var results; 

  results = getInitialImage(placeIdent);

  photoUrl = results.photoUrl;

  var randStringForUrl = Math.random().toString(36).substring(7);

  photoUrl = photoUrl + '?' + randStringForUrl;

  htmlAttr = results.htmlAttr; 

  console.log(photoUrl);

然后，我要像這樣更新頁面中圖像的來源：

<img id="displayImage" style="height: 200px"></img>
            <script>document.getElementById('displayImage').src = photoUrl
;</script>

注意： console.log(placeIdent)顯示了我所期望的-用戶的更新的placeID，但是出於某種原因console.log(photoUrl)顯示了“舊的” photoUrl（來自上一個請求）。 如果我手動刷新頁面，則可以解決此問題。

還要注意，根據以前的研究，我確定可以緩存圖像，因此在URL后面附加了'?' + randStringForUrl '?' + randStringForUrl以避免緩存。

關於為什么photoUrl和隨后的圖像在我刷新之前沒有更新的任何想法，即使placeIdent （即Google PlaceID）正在更新？

謝謝！！

Answer 1

將我的解決方案發布給其他任何新手。 我最終使用了超時功能：

window.onload = function() {

      setTimeout(function(){ 
        document.getElementById('displayImage').src = photoUrl;
      }, 200);
}

做到了這一點。 我的html代碼有一個占位符加載gif，它在頁面加載后200毫秒更新。

HTML：

    <div style="height: 250px;"><img src="images/loading.gif" id="displayImage"></img></div>

希望這對某人有幫助！