Webページをリロードしてもimg.srcは更新されません

debugcn 投稿 Dev

CuzWhyNot Vlogs

私は最近HTMLとJSを学び始め、この時点で行き詰まりました。「cataas」を使用して新しい画像を更新していますが、ページをリロードするたびに何も変更されません。

function loadCatPicture() {
  var img = document.getElementById('cat-picture');
  img.src = 'https://cataas.com/cat';
};

window.onload = function() {
  loadCatPicture();
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Cats Sleep Anywhere</h1>
  <p>
    Cats sleep anywhere, any table, any chair.<br> Top of piano, window-ledge, in the middle, on the edge.<br> Open draw, empty shoe, anybody's lap will do.<br> Fitted in a cardboard box, in the cupboard with your frocks.<br> Anywhere! They don't care!
    Cats sleep anywhere.<br>
    <br>
    <img id="cat-picture">
    <b>Eleanor Farjeon</b></p>
  <p></p>
</body>

</html>

esqew

お使いのブラウザは、おそらくからの画像応答をキャッシュしているだけcataas.comです。

このSOの質問への回答に従ってGET、サーバーによって無視される要求URLにいくつかの無害なパラメーターを追加するだけで、最終的にブラウザーをだまして応答をキャッシュしないようにすることができます。

function loadCatPicture() {
  var img = document.getElementById('cat-picture');
  img.src = 'https://cataas.com/cat?ver=' + (new Date().getTime());
};

window.onload = function() {
  loadCatPicture();
};

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <h1>Cats Sleep Anywhere</h1>
  <p>
    Cats sleep anywhere, any table, any chair.<br> Top of piano, window-ledge, in the middle, on the edge.<br> Open draw, empty shoe, anybody's lap will do.<br> Fitted in a cardboard box, in the cupboard with your frocks.<br> Anywhere! They don't care!
    Cats sleep anywhere.<br>
    <br>
    <img id="cat-picture">
    <b>Eleanor Farjeon</b></p>
  <p></p>
</body>

</html>

この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。

侵害の場合は、連絡してください[email protected]