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。

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

希望这对某人有帮助！

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

1 个答案: