web-dev-qa-db-ja.com

ページを更新せずに画像を再読み込み

Javascript：

function atualiza() {
  document.getElementById('badge').innerHTML = location.reload();
}

「location.reload（）」がページを更新することを知っています...

HTML：

<img id="badge" src="<?php echo $cms_url; ?>/imaging/badge.php?badge=$mygroup['badge']; ?>" />

ページを更新せずにsrc=""または<img />を更新する必要があります。

javascriptjqueryajaxrefreshreload
5
jcsantos

imgタグを次のように変更します。

<img id="badge" src="$cms_url/imaging/badge.php?badge=$mygroup['badge']; ?>">/imaging/badge.php?badge=<?php echo $mygroup['badge']; ?>" />

次に、以下のコードを使用して、ボタンやアンカーなどをクリックするだけで画像ソースを変更できます。

document.getElementById("badge").src="new image src here";

JQueryも使用できます。

$("#badge").attr("src", "new image src here");
12
Felix

これを参照してください： ページをリロードせずに画像を更新する

document.getElementById('yourimage').src = "url/of/image.jpg?random="+new Date().getTime();

とにかく、これはそのスレッドからコピーされたので、どうやら画像をリロードするはずです。

12
Kevin

たぶん、私が書いたjavascriptは、この質問を読む人にとって役立つでしょう。ブラウザのキャッシュを壊すために、すべての画像にタイムスタンプをアドバタイズします。

<script type="text/javascript">  

    function replaceSrc()
    {

        var images = document.getElementsByTagName('img');

        for(var i = 0; i < images.length; i++)
        {
            var dt = new Date();
            var img = images[i];

            if(img.src.length >= 0 & img.id != 'idImageNoTimestamp')
            {
                img.src = img.src + "?" + dt.getTime();
                //javascript:alert(document.lastModified);
            }
        }
    }
    replaceSrc();
      </script>

id属性を使用して、一部の画像を除外できます。 Googleの静的マップ画像を除外するために使用しました。不要な場合は、以下を削除してください。

 & img.id != 'idImageNoTimestamp'
2
Aurora

AngularJの場合、次のようにhtmlファイルに直接追加できます。

Html：

_<div ng-controller="MyCtrl1"><div ng-repeat="img in images"> <img ng-src="{{img.image}}?_={{generatingNewDate}}"></div></div>
_

Ctrl：$scope.generatingNewDate = new Date().getTime();

あなたはこれを見ることができます： https://jsfiddle.net/k614L8tt/

1
yaqub

なぜこれを行う必要があるのですか？

<img id="badge" src="<img id="badge" src="$cms_url/imaging/badge.php?badge=$mygroup['badge']; ?>">/imaging/badge.php?badge=<?php echo $mygroup['badge']; ?>">

あなたがこれをするかもしれないとき

<img id="badge" src="<?php echo $cms_url. '/imaging/badge.php?badge='.$mygroup['badge']; ?>">
0
user2672373