3

これはおそらく簡単な質問ですが、私は困惑していて、どこから始めればよいのかわかりません。

画像へのURLを返すPHPスクリプト（image_feed.php）があります。このURlが呼び出されるたびに、使用可能な最新の画像が返されます（画像は数秒ごとに変化します）。

私がしたいのは、ページが読み込まれるときに、最新のURLを返すimage_feed.phpへのAJAX呼び出しがあるということです。次に、このUR1がHTM1に挿入され、適切な画像srcが置き換えられます。

5秒後、このプロセスを繰り返して、画像を更新します。ただし、読み込みが完了するまで画像を入れ替えたくないので、新しい画像が読み込まれる前に空白が表示されないようにします。

現在、次のjQueryがあります。これは、image_feed.phpの戻り値を＃image1というdivに直接ロードするだけです。image_feed.phpは、html画像タグを提供するように正しくフォーマットされています。

    $(document).ready(function(){
    var $container = $("#image1");
    $container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>')
    var refreshId = setInterval(function()
    {
        $container.load('image_feed.php?CAMERA_URI=<?=$camera_uri;?>');
    }, 5000);

});

これは機能しますが、問題があります。画像のダウンロードに時間がかかるため、画像が更新されるたびにIEとFirefoxで画像のサイズの空白が表示されます。

image_feed.phpがプレーンURLを画像に返すために必要なことはわかっています。次に、jQueryを使用してこのURLをリクエストし、プリロードしてから既存の画像と交換します。

しかし、私はまだどこにでも行くのに苦労しています。誰かが私にいくつかのポインタ/助けを与えるほど親切でしょうか？

4

4 に答える 4

3

あなたはできる。何かをリロードしたい場合は、検索クエリを追加するだけで、ソースが更新されます。

たとえば、頻繁に変更される画像（キャプチャなど）があり、ブラウザを更新せずに再度読み込む場合は、次のように実行できます。

初期コード：

<img src="captcha.png" alt="captcha" />

更新されたコード：

<img src="captcha.png?1" alt="captcha" />

ここで使用されるスクリプトは次のとおりです。

var d = new Date();
$('img').attr('src', $('img').attr('src') + '?_=' + d.getMilliseconds());

お役に立てれば！:)

于 2012-06-06T19:09:41.013 に答える
3 
$(document).ready(function() {
    var $img = $('#image1');
    setInterval(function() {
        $.get('image_feed.php?CAMERA_URI=<?=$camera_uri;?>', function(data) {
            var $loader = $(document.createElement('img'));
            $loader.one('load', function() {
                $img.attr('src', $loader.attr('src'));
            });
            $loader.attr('src', data);
            if($loader.complete) {
                $loader.trigger('load');
            }
        });
    }, 5000);
});

テストされていません。上記のコードは、バックグラウンドで新しい画像をロードしてから、ロード時に古い画像のsrc属性を設定する必要があります。

ロードのイベントハンドラーは1回だけ実行されます。この.completeチェックは、ロードする画像をキャッシュした可能性のあるブラウザに必要です。このような場合、これらのブラウザはloadイベントをトリガーする場合としない場合があります。

于 2012-06-06T19:30:50.383 に答える
1

サーバーからURLを再度取得する必要がある場合は、新しい画像URLを取得するために、次の方法を実行できます。

$.ajax({
  url: 'getnewimageurl.php',
  success: function(data) {
    $('img').attr('src', data);
  }
});

サーバーは、新しいイメージ名のみを返す必要があります。たとえば、PHPコードは次のようになります。

<?php
    $images = array("jifhdfg", "jklduou", "yuerkgh", "uirthjk", "xcjhrii");
    die($images[date('u') % count($images)] . ".png"); // Get the random milliseconds mod by length of images.
?>
于 2012-06-06T19:27:54.030 に答える
0

jQuery'onImagesLoad'プラグインを使用することをお勧めします。 これにより、画像の読み込みが完了したときにコールバックが提供されます。

サーバーから新しい画像のURLを受け取ったら、それを使用して新しい<imgオブジェクトを作成し、それにコールバックをsrc="new_url_from_server"アタッチ'onImagesLoad'します。コールバックが呼び出されると、画像のダウンロードが完了します。

これで、古いimgオブジェクトの「src」属性をnew_url_from_serverに置き換えることができます。新しい画像はすでにキャッシュで利用可能であるため、再度ダウンロードされることはなく、すぐに表示されます。

または、古い画像を非表示にして、この新しい画像をDOMに追加することもできます（上記が正しく機能する場合は不要です）。

いくつかの裸の骨のサンプルは次のようになります。

<!DOCTYPE html> 
<html> 
<body> 
<img id='bla' src="10.jpg" />

<script type="text/javascript" src="jquery.min.js"></script> 
<script type="text/javascript" src="jquery.onImagesLoad.js"></script> 
<script type="text/javascript"> 
    $(function(){ 
        var img = $('<div><img src="http://myserverbla/images/verybig.jpg"></img></div>');
        img.onImagesLoad({ 
                all : allImgsLoaded 
            });

        function allImgsLoaded($selector){ 
            var allLoaded = ""; //build a string of all items within the selector 
            $selector.each(function(){ 
                $('#bla').attr('src','http://myserverbla/images/verybig.jpg');
            }) 
        } 
    }); 
</script> 

</body> 
</html>
于 2012-06-06T19:34:57.090 に答える