来自 Google 地方信息的图片需要刷新页面答案

【问题标题】：Image from Google Places Requires Page Refresh来自 Google 地方信息的图片需要刷新页面
【发布时间】：2018-07-08 17:40:11
【问题描述】：

我遇到了我认为可能是缓存或异步错误，但我不确定。

基本上，我有一个 javascript 函数来获取用户输入的位置的 Google Places 图像。

这是那个函数：

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) 显示“旧”照片网址（来自先前的请求）。如果我手动刷新页面，这个问题就解决了。

另外请注意，根据之前的一些研究，我确定图像可能会被缓存，因此我在 URL 中附加了 '?' + randStringForUrl 以避免缓存。

有什么想法为什么photoUrl 以及随后的图像在我刷新之前没有更新，即使placeIdent（即 Google PlaceID）正在更新？

谢谢！！

【问题讨论】：

您如何随后调用getInitialImage(..) 以使其刷新图像？
@82Tuskers，我现在不是。我只是在浏览器中单击刷新。您如何建议我进行后续调用（基本上模仿页面刷新）？所有其他变量在刷新时（和刷新前）都显示良好。

标签： javascript php html google-places-api

【解决方案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>

希望这对某人有所帮助！

【讨论】：